在部分之间滚动动画 - 没有插件

Question

我试图创建一个脚本来动画我页面上的部分之间的滚动而不使用插件 - 只是纯粹的jquery。但是，当我尝试滚动页面时，似乎遇到了一些问题。任何人都可以帮助我吗？

这是我的jsFiddle 我的代码：

$(document).ready(function() {
        $('.main').bind('mousewheel', function(e){
            var mHeight=$(document).height()/8;
            console.log(mHeight);
            if(e.originalEvent.wheelDelta /120 > 0) {
                // alert('up');
                $('html, body').animate({
                    scrollTop: mHeight
                }, 1000);
            }
            else{
                // alert('down');
                $('html body').animate({
                    scrollTop: -mHeight
                }, 1000);
            }
        });
    });

Answer 1

检查这个

$('body').bind('mousewheel', function (e) {
        e.stopPropagation();
        e.preventDefault();
        var mHeight = $(document).height() / 8;
        console.log(mHeight);
        if (e.originalEvent.wheelDelta / 120 > 0) {
            // alert('up');
            $('html, body').stop().animate({
                scrollTop: -mHeight
            }, 1000);
        }
        else {
            // alert('down');
            $('html body').stop().animate({
                scrollTop: mHeight
            }, 1000);
        }
    });

Demo

修改

 var index = 1;
    $('body').bind('mousewheel', function (e) {
        e.stopPropagation();
        e.preventDefault();
        var mHeight = $(document).height() / 8;
        console.log(mHeight);
        if (e.originalEvent.wheelDelta / 120 > 0) {
            // alert('up');
            index--;
            mHeight = mHeight * index;
            $('html, body').stop().animate({
                scrollTop: mHeight
            }, 1000);
        }
        else {
            // alert('down');
            index++;
            mHeight = mHeight * index;
            $('html body').stop().animate({
                scrollTop: mHeight
            }, 1000);
        }
    });

Updated Fiddle