jQuery：錨滾動跳動

Question

我正在使用來自www.css-tricks.com的一些代碼，這些代碼可用於將本地滾動動畫化為頁面錨。 這是代碼片段：

$("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;
    }
});

我嘗試使用各種時間作為動畫持續時間，但是當我單擊鏈接時，頁面確實可以正確滾動，但是在滾動到達目標位置后，動畫將繼續。 換句話說，它會滾動，但是在動畫看起來完成之后，如果您嘗試手動滾動走開，頁面會再次將自身動畫到該位置大約半秒鍾。

片段是否有問題/之前是否有人看過？

Answer 1

我找到了一個示例，其中我們在其他事件上停止了滾動事件。 我為您提供了一個不使用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; 
};

Answer 2

你可以嘗試一下：

$('.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();
    });       

});