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

时间:2015-09-02 10:34:08

标签: javascript html css scroll scrollto

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

1 个答案:

答案 0 :(得分:2)

您可以添加您希望动画运行的时间,如下所示:

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

其中1000是以ms为单位的时间。如果你想要它更慢,增加这个数字。