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.

Answer 1

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.