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

  • BMG Rentals Property Management

    BMG Rentals

    23 Mayıs 2011
  • EEVblog

    EEVblog

    4 NİSAN 2009
  • Willie D.

    Willie D.

    16 Aralık 2006