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

});

jQuery：Anchor滚动跳跃

2 个答案: