jQuery：錨點滾動跳躍

我正在使用一些來自www.css-tricks.com的代碼，可用於爲本地滾動頁面錨點設置動畫。以下是代碼片段：jQuery：錨點滾動跳躍

$("class-name-here").on("click", function() { 
    var $target = $(this.hash); 
    $target = $target.length && $target 
    || $('[name=' + this.hash.slice(1) +']'); 
    if ($target.length) { 
     var targetOffset = $target.offset().top; 
     $('html,body') 
     .animate({scrollTop: targetOffset}, 1500, "easeOutQuint"); 
    return false; 
    } 
});

我一直利用各種時間的動畫時間嘗試過，但是當我點擊鏈接時，頁面不正確地滾動，但滾動到達目的地後，動畫繼續。 換句話說，它會滾動，但在動畫似乎完成後，如果您嘗試手動滾動，則頁面會再次爲該位置自動生成約半秒的動畫。

這段代碼有什麼問題/有沒有人看過這個？

來源

2015-11-12 Jeremy Thomas

儘量減少時間的動畫。 1.5秒的時間太長，如果嘗試從這裏滾動出來時沒有結束，則動畫會嘗試完成，因爲您處於每個時刻的位置。所以嘗試使用'animate（{scrollTop：targetOffset}，250，「easeOutQuint」）;' –

嘗試'slow'而不是1500.我認爲slow是獲得平滑動畫的最佳數量。 – tR4xX

我發現了一個例子，我們停在不同類型的事件的滾動事件。我爲你做了一個例子，而不使用jquery-ui。滾動定時器設置爲2.5秒，這樣就可以達到其目標之前隨時停止：JS-FIDDLE

function goTo(sectionID) { 

    var page = $("html, body"); 
    page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

    page.animate({ scrollTop: $("#section" + sectionID).offset().top }, 2500, 'swing', function(){ 
     page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
    }); 

    return false; 
};

來源

2015-11-12 15:37:12

工程就像一個魅力！謝謝 –

你可以試試這個：

$('.your-class-name-here').click(function(event) { 
     var id = $(this).attr("href"); 
     var offset = 10; 
     var target = $(id).offset().top - offset; 
     $('html, body').animate({scrollTop:target}, 1000); 
     event.preventDefault(); 
    });  

});

來源

2015-11-12 15:10:29 undefinedtoken

回答

相關問題