Auto-scroll to the next anchor on the mouse wheel

Question

I have 5 bindings on my html page. Is there a way for a page to automatically scroll to the next anchor (#) with a single scroll of the mouse? Is there any way this happens regardless of the name of the binding? just to the next anchor.

Answer 1

This works in Chrome, IE, Firefox, Opera and 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 }); } }); })(); 

Script http://jsfiddle.net/t6LLybx8/728/

How it works

To control the mouse wheel in most browsers, use $(document).on('mousewheel') . Firefox is a weird game and it requires $(document).on('DOMMouseScroll') .

To get the direction of the mouse wheel (up or down), use event.originalEvent.wheelDelta . Again, Firefox is a weird game, and you should use -event.originalEvent.detail .

If the direction is a negative number, you scroll down the page. In this case, skip each tag starting with the first until its first vertex getClientRects() becomes> = 40. (I used 40 if the browser adds a default margin at the top of the viewport.)

If the direction is a positive number, you scroll the page. In this case, skip each tag starting with the last until its first vertex getClientRects() becomes <-20. (I used -20 to move us up the page.)

The delay variable does not allow you to scroll the mouse wheel too quickly. The whole function ends with a closure, so delay remains a private variable.

Answer 2

let's say you have an array of IDs. then you can do something like ...

  var ancherList = ["id1","id2","id3"]; var currentPosition = null; var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(mousewheelevent,function(e){ var scrollToAncher function (id,speed){ spd = speed ? "slow" //deafult value for the animation speed var ancherTag = $("a[name='"+ id +"']"); $('html,body').animate({scrollTop: ancherTag.offset().top},spd); } e.preventDefault(); var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail); if (delta > 0){ console.log("up") //check your current position and target id switch(currentPosition){ case null : case ancherList[0] : scrollToAncher(ancherList[1]); currentPosition = ancherList[1]; break; case ancherList[1] : currentPosition = ancherList[2]; scrollToAncher(ancherList[2]); break; case ancherList[2] : currentPosition = ancherList[0]; scrollToAncher(ancherList[0]); break; } } else { console.log("down") //do the same for mouse wheel down } }); 

code not verified. If a syntax error occurs