Bir şekilde sağlamak için yerel bir bağlantı için bir bağlantı veya sayfayı aşağı yukarı ne zaman için basit bir slayt efekti eklemek için arıyorum.

Mümkünse böyle bir bağlantı olduğu bir şey istiyorum:

<a href="#nameofdivetc">link text, img etc.</a>

bu bağlantıyı sürgülü bir bağlantı olmak istediğini biliyorum bu yüzden belki de bir sınıf eklendi:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

Bu bağlantı tıklandığında, sayfanın sadece yukarı veya aşağı gereken yere (bir div, Başlığı olabilir, sayfanın üst vs.) kayıyor.

Biraz severdim bu site benim http://www.adriancrellin.co.uk/ , ama bu iyi bir süre önce ve ben şimdi bunu yapmak için bir istemci ve merak eden olursa daha iyi ya da daha basit bir çözüm.

Herhangi bir fikir harika olurdu!

Bu daha önce vardı, tam olarak bu kodu nereden aldığımı hatırlayamıyorum oldukça iyi iş gibi görünüyor, daha iyi bir çözüm harika olurdu ama şimdi, ama o da ne

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#" trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Açıklama

Bu jQuery.offset() jQuery.animate() kullanarak yapabilirsiniz.

jsFiddle Demonstration Check out.

Örnek

function scrollToAnchor(aid){
    var aTag = $("a[name='"  aid  "']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

Daha Fazla Bilgi

• jsFiddle Demonstration
• jQuery.offset()
• jQuery.animate()