How to enforce a “smooth scrolling” rule for mousewheel, jQuery?

Question

How are you? My Question:

How can I control or specify the way a document scrolls to the position of desire described by either the mouse scrollwheel, an

Answer 1

my solution with Mobile effect

    

    
aaa aaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ffffdffffdd ffffd ffffffffd ffffffffd ffffdffffffffd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ffffdffffdd ffffd ffffffffd ffffffffd ffffdffffffffd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ffffdffffdd ffffd ffffffffd ffffffffd ffffdffffffffd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ffffdffffdd ffffd ffffffffd ffffffffd ffffdffffffffd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ffffdffffdd ffffd ffffffffd ffffffffd ffffdffffffffd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ffffdffffdd ffffd ffffffffd ffffffffd ffffdffffffffd aaaaaaaaaaaa aaaaaaaa aaa

        #parent {
        width: 300px;
        height: 300px;
        background-color: #aaa;
        margin: auto auto;
        overflow: hidden;
    }
    #child {
        width: 200px;
        height: 800px;
        background-color: #999;
        margin: auto auto;
        text-align: justify;
        position: relative;
        top: 0;
        -webkit-transition: all 0.5s ease-out;
}




$('#parent').bind('mousewheel', function (e) {
        if (!(e.originalEvent.wheelDelta == 120)) {
            var top = parseInt($("#child").css("top"));
            $("#child").css("top", (top - 100) + "px");
            top = parseInt($("#child").css("top"));
            if (top <= -500) {
                setTimeout(function () {
                    $("#child").css("top", "-500px");
                }, 100);
            }
        } else {
            var top = parseInt($("#child").css("top"));

            $("#child").css("top", (top + 100) + "px");
            top = parseInt($("#child").css("top"));
            if (top >= 0) {
                setTimeout(function () {
                    $("#child").css("top", "0");
                }, 100);
            }
        }
    });

THE DEMO