SORU
10 EKİM 2011, PAZARTESİ


Bir çapa linkten yumuşak kaydırma JQuery

Benim sayfadaki köprüler bir çift var. Bir kullanıcı yardım bölümü ziyaret ettiklerinde okuyacak SSS.

Çapa bağlantıları kullanarak, çapa doğru sayfayı kaydırın ve kullanıcı kılavuzunu edebilirim.

Bir şekilde kaydırma pürüzsüz hale getirebilirsiniz.

Şöyle bir şey: http://www.position-relative.net/creation/anchor/

Ama javascript lib özel bir kullanıyor dikkat edin. Belki bir WordPress kullanmak sunmaktadır bu pişmiş gibi şeyler?

CEVAP
10 EKİM 2011, PAZARTESİ


$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Ve burada keman: http://jsfiddle.net/9SDLw/


Eğer hedef öğe KİMLİĞİ varsa, ** 5, kullanımı bu bağlama için:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 500);
    return false;
});

Daha yüksek performans, $('html, body') çalışma yok ki seçici, önbellek gerekirher zamanbir bağlantı tıklandığında:

var $root = $('html, body');
$('a').click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Eğer URL güncelleştirilmesi istiyorsanız, animate geri içinde yap:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • MuscleProdigyTV

    MuscleProdig

    8 Ocak 2011
  • Sali Kaceli

    Sali Kaceli

    24 ŞUBAT 2009
  • TheDamnWreckless

    TheDamnWreck

    12 Temmuz 2010