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

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