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

  • HER0R

    HER0R

    16 Aralık 2007
  • Neil Cicierega

    Neil Ciciere

    22 Mart 2006
  • SunsetTrance

    SunsetTrance

    20 EYLÜL 2008