Javascript用鼠标缓慢滚动到页面上的下一个 anchor

Question

我有一个带有多个 anchor 的单页网站。我引用这个 fiddle 示例 http://jsfiddle.net/kamikazefish/t6LLybx8/201/用于在使用鼠标滚轮时将页面前进到下一个 anchor 。有没有一种方法可以控制速度，如果有人可以提供帮助，我将不胜感激。请记住，我对代码非常陌生，如果它被写出来，我会喜欢它，而不仅仅是告诉我添加一个函数或其他东西，谢谢。这是 JavaScript。

(function() {
    var delay = false;

    $(document).on('mousewheel DOMMouseScroll', function(event) {
        event.preventDefault();
        if(delay) return;

        delay = true;
        setTimeout(function(){delay = false}, 200)

        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

        var a= document.getElementsByTagName('a');
        if(wd < 0) {
            for(var i = 0 ; i < a.length ; i++) {
                var t = a[i].getClientRects()[0].top;
                if(t >= 40) break;
            }
        }
        else {
            for(var i = a.length-1 ; i >= 0 ; i--) {
                var t = a[i].getClientRects()[0].top;
                if(t < -20) break;
            }
        }
        $('html,body').animate  ({
            scrollTop: a[i].offsetTop
        });
    });
})();

Answer 1

您只需添加希望动画运行的时间，如下所示:

$('html,body').animate({
    scrollTop: a[i].offsetTop
}, 1000);

其中 1000 是以毫秒为单位的时间。如果您希望速度更慢，请增加此数字。