Javascript 用鼠标慢慢滚动到页面上的下一个锚点

Question

我有一个包含多个锚点的单页网站。我正在引用此 fiddle 示例 http://jsfiddle.net/kamikazefish/t6LLybx8/201/，以便在使用鼠标滚轮时将页面推进到下一个锚点。如果有人可以提供帮助，我将不胜感激。请记住，我对代码很陌生，如果它被写出来，我会喜欢它，而不仅仅是告诉我添加一个函数或其他东西，谢谢。这里是 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 是以毫秒为单位的时间。如果你想让它更慢，增加这个数字。

Javascript 用鼠标慢慢滚动到页面上的下一个锚点

Javascript scroll to next anchor on page with mouse slowly

html

javascript

css

scroll

scrollto