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

  • Angry Paintballer

    Angry Paintb

    8 Ocak 2012
  • DavidParody

    DavidParody

    17 EKİM 2009
  • H3Ctic (old channel)

    H3Ctic (old

    23 Mart 2011