How to scroll to a specific div when the mouse is scrolled with jQuery?

Question

I have this code right now which scrolls to the correct place when a button is clicked:

$("#skills").click(function() {
    $('html, body').animate({scrollTop: $("#skills_page").offset().top}, 500);
    $(this).addClass("toggled_alt");
    $("#skills_id").css("background-color", "#646464");
    $("#contact_id, #home_id, #about_id").css("background-color", "transparent");
    $("#home, #contact, #about").removeClass("toggled");
    $("#home, #contact, #about").removeClass("toggled_alt");
});

What I want to do now is I want the page to scroll to the next div when the scroll wheel is moved down/up. I've been searching google for a while now and all that comes up is stuff about smooth scrolling which is not what I want. Any help would be great, thanks.

http://alvarotrigo.com/fullPage/ I did that on my site with this plugin. — Akul Von Itram, Jun 25 '15 at 23:08

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Checkout this answer and it's comments, and the MDN page on the wheel event.

Looks like you can bind to the event like this:

$(window).on('wheel', function(event){

But that might be overwhelming as it's each "click" of the mousewheel.

See this fiddle. Only tested in Chrome.

edited May 23 '17 at 12:29

Community

1
1

answered Jun 25 '15 at 23:11

Michael Tallino

821
4
16

Maybe with some conditional logic you could make this work. Is there a specific DomMouseScroll for up/down? – Joe Scotto Jun 25 '15 at 23:57

How to scroll to a specific div when the mouse is scrolled with jQuery?

1 Answers1