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

  • Digital Bounds

    Digital Boun

    19 Temmuz 2013
  • NewsyTech

    NewsyTech

    2 AĞUSTOS 2010
  • THE RED DRAGON

    THE RED DRAG

    6 ŞUBAT 2009