JSFiddle - React, Tailwind, and code Playground

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

HTML

<div class="mydiv" style="text-align:center; color:green">Portfolio</div>
<div class="mydiv" style="background-color: #111">Page 1</div>
<div class="mydiv" style="background-color: #222">Page 2</div>
<div class="mydiv" style="background-color: #333">Page 3</div>
<div class="mydiv" style="background-color: #444">Page 4</div>
<div class="mydiv" style="background-color: #555">Page 5</div>
<div class="mydiv" style="background-color: #666">Page 6</div>
<div class="mydiv" style="background-color: #777">Page 7</div>
<div class="mydiv" style="background-color: #888">Page 8</div>
<div class="mydiv" style="background-color: #999">Page 9</div>
<div class="mydiv" style="background-color: #aaa">Page 10</div>
<div class="mydiv" style="background-color: #bbb">Page 11</div>
<div class="mydiv" style="background-color: #ccc">Page 12</div>
<div class="mydiv" style="background-color: #ddd">Page 13</div>
<div class="mydiv" style="background-color: #eee">Page 14</div>
<div class="mydiv" style="background-color: #fff">Page 15</div>

CSS

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

JavaScript

$(document).ready(function () {
    var divs = $('.mydiv');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});