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

Javascript scroll to next anchor on page with mouse slowly

本文关键字：下一个 鼠标 慢慢 滚动      更新时间：2023-09-26

我有一个单页网站与多个锚。我引用这个小提琴示例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
        });
    });
})();

你可以添加你想要动画运行的时间，像这样:

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

其中1000为ms单位的时间，如果你想让它更慢，增加这个数字

相关文章：