Javascript空格键滚动到页面上的下一个锚点答案

【问题标题】：Javascript spacebar scroll to next anchor on pageJavascript空格键滚动到页面上的下一个锚点
【发布时间】：2015-08-11 17:30:18
【问题描述】：

我有一个带有多个锚点的单页网站。我引用这个fiddle example 在使用鼠标滚轮时将页面推进到下一个锚点。我有什么办法可以修改它以考虑空格键滚动？

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

http://jsfiddle.net/kamikazefish/t6LLybx8/201/

(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 links = document.getElementsByTagName('a');
    var link;
    if(wd < 0) {
        link = findNext(links);
    }
    else {
        link = findPrevious(links);
    }

    animate(link);
  });

    $('body').keydown(function(e){
       if(e.keyCode == 8){
           e.preventDefault();
           // user has pressed backspace
           var links = document.getElementsByTagName('a');
           link = findPrevious(links);
           animate(link);
       }
       if(e.keyCode == 32){
           e.preventDefault();
           // user has pressed space
           var links = document.getElementsByTagName('a');
           link = findNext(links);
           animate(link);
       }
    });

  function findNext(links) {
       for(var i = 0 ; i < links.length ; i++) {
        var t = links[i].getClientRects()[0].top;
        if(t >= 40) return links[i];
      }
  }

  function findPrevious(links) {
      for(var i = links.length-1 ; i >= 0 ; i--) {
        var t = links[i].getClientRects()[0].top;
        if(t < -20) return links[i];
      }
  }

  function animate(link) {
    if( link ) {
      $('html,body').animate({
        scrollTop: link.offsetTop
      });
    }
  }
})();

【讨论】：