Javascript 动画部分之间的滚动-无插件

Javascript 动画部分之间的滚动-无插件,javascript,jquery,scroll,jquery-animate,Javascript,Jquery,Scroll,Jquery Animate,我正在尝试创建一个脚本,在我的页面上不使用插件的情况下,只需使用纯jquery就可以在各个部分之间滚动。但当我尝试滚动页面时,似乎遇到了一些问题。有人能帮我吗 这是我的 我的代码是: $(document).ready(function() { $('.main').bind('mousewheel', function(e){ var mHeight=$(document).height()/8; console.log(mHei

我正在尝试创建一个脚本,在我的页面上不使用插件的情况下,只需使用纯jquery就可以在各个部分之间滚动。但当我尝试滚动页面时,似乎遇到了一些问题。有人能帮我吗

这是我的 我的代码是:

$(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);
            }
        });
    });
检查这个

$('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);
        }
    });

编辑

 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);
        }
    });

@AnoopJoshi我想在部分之间设置动画和滚动,不是在这样的东西之间,而是在没有插件的情况下。我们怎么能每次只检测一次轮子/执行一次功能?所以只有一个部分被更改?我想,完成动画事件可以帮助您。对此进行研究