自动滚动到鼠标滚轮的下一个锚点

Question

我的html页面上有5个锚点.有没有办法通过单个鼠标滚轮滚动页面自动滚动到下一个锚点(#)？有没有办法,无论锚的名称如何都会发生？刚到下一个锚.

Answer 1

这适用于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
      });
    }
  });
})();

小提琴在http://jsfiddle.net/t6LLybx8/728/

这个怎么运作

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

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

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

如果方向是正数,则向上滚动页面.在这种情况下,循环遍历从最后一个开始的每个标记,直到其第一个getClientRects()顶部<-20.(我用-20来确保我们向上移动页面.)

该delay变量可防止鼠标滚轮滚动太快.整个函数包含在一个闭包中,因此delay仍然是一个私有变量.