html5 锚点 鼠标滚动,javascript – 自动滚动到鼠标滚轮的下一个锚点

这适用于Chrome,IE,Firefox,Opera和Safari：

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

}

}

if(i >= 0 && i < a.length) {

$('html,body').animate({

scrollTop: a[i].offsetTop

});

}

});

})();

这个怎么运作

要在大多数浏览器中监视鼠标滚轮,请使用$(document).on(‘mousewheel’). Firefox是奇怪的,它需要$(document).on(‘DOMMouseScroll’).

要获取鼠标滚轮的方向(向上或向下),请使用event.originalEvent.wheelDelta.同样,Firefox是古怪的,你必须使用-event.originalEvent.detail.

如果方向是负数,则向下滚动页面.在这种情况下,循环遍历从第一个开始的每个标记,直到它的第一个getClientRects()顶部是> = 40.(我使用40,以防浏览器在视口顶部添加默认边距.)

如果方向是正数,则向上滚动页面.在这种情况下,循环遍历从最后一个开始的每个标记,直到它的第一个getClientRects()顶部为< -20. (我用-20来确保我们向上移动页面.) 延迟变量可防止鼠标滚轮滚动太快.整个函数包含在一个闭包中,因此延迟仍然是一个私有变量.