JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/17273719/how-to-scroll-down-100-with-mousewheel-at-once-jquery

by harpax

HTML

<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="https://raw.github.com/flesler/jquery.scrollTo/master/jquery.scrollTo.js"></script>
<div style="text-align:center; color:green" div="page_0"> Portfolio </div>

CSS

html, body, body>div { height:100%; }

JavaScript

$(function() {
    for (var i=1; i<10; i++) {
        var div = document.createElement('div');
        div.setAttribute('id', 'page_'+i);
        div.style.backgroundColor = '#'+i+i+i;
        div.style.color = '#ff0';
        div.innerHTML = 'Page '+i;
        document.body.appendChild(div);
    }
    var current_page = 0;
  
    $("body").mousewheel(function(event, delta, deltaX, deltaY) {
        event.preventDefault();
        if (delta > 0 && current_page > 0) {
            current_page = current_page - 1;
            $("body").scrollTo( '#page_'+current_page);  
        } else if (delta < 0 && current_page < 10) {
            current_page = current_page + 1;
            $("body").scrollTo( '#page_'+current_page);
        }
    });
});