RGilkes
RGilkes

Reputation: 1052

Javascript spacebar scroll to next anchor on page

I have a single page website with multiple anchors. I am referencing this fiddle example for advancing the page to the next anchor when the mouse scrollwheel is used. Is there any way for me to modify this to also account for spacebar scrolling?

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

Upvotes: 1

Views: 285

Answers (1)

blablabla
blablabla

Reputation: 1478

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

Upvotes: 1

Related Questions