JS 整屏滚动

HTML

<div class="bodyContentContainer">
    <div class="bodyContainer">
        <div class="Container01"></div>
        <div class="Container02"></div>
        <div class="Container03"></div>
        <div class="Container04"></div>
    </div>
</div>

CSS

 body{
            font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
            color:#000304;
            margin:0;
            background-color: #ffffff;
        }
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
            margin:0;
            padding:0;
            list-style:none;
        }
        /*===*/
        .bodyContentContainer{
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .bodyContainer{
            width: 100%;
            position: relative;
        }
        .Container01{
            background: #7A7A7A;
            width: 100%;
        }
        .Container02{
            background: #FFD700;
            width: 100%;
        }
        .Container03{
            background: #BA55D3;
            width: 100%;
        }
        .Container04{
            background: #40E0D0;
            width: 100%;
        }
        .sidebarContainer{
            position: fixed;
            top: 150px;
            right: 20px;
        }
        .sidebarContainer li{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            margin-top: 20px;
            cursor: pointer;
        }
        .sidebarContainer li.sidebarActive{
            background: red;
        }

JS

$(document).ready(function () {
        var body;
    //    页面高度
        var height = $(window).height();
        var divContainer = $(".bodyContainer");
        var div = $(".bodyContainer div");
        $(".bodyContentContainer").css("height",height);
        div.css("height",height);
        var length = div.length;
        var speed = 1000;
        //初始化页数
        var page = 0;
        //初始化向下
        var isFinish = true;
        divContainer.css("height",height*length);
        var sideContainer = $(".sidebarContainer");
        for(var i= 0,str="";i<length;i++){
            str+="<li></li>"
        }
        sideContainer.html(str).children(":first").addClass("sidebarActive");
        //鼠标点击
        $(".sidebarContainer li").click(function () {
            $(".bodyContainer").animate({
                top: -height * $(this).index()
            },speed);
            //关联点击和滚动
            page = $(this).index();
            $(this).addClass("sidebarActive").siblings().removeClass("sidebarActive");
        });
        //鼠标滚动
        if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){
            body = document.documentElement;
        }else{
            body = document.body;
        }
        var scrollFunc = function(e){
            if(isFinish){
                var scrollTop = body.scrollTop;
                e = e || window.event;
                if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height-20){
                    page++;
                    if(page>=length){
                        return page = length-1;
                    }else{
                        scroll(page);
                    }
                }else if((e.wheelDelta>0 || e.detail<0)&& scrollTop<=height+20){
                    page--;
                    if(page<0){
                        return page = 0;
                    }else{
                        scroll(page);
                    }
                }
            }
        };
        var scroll = function(page){
            isFinish = false;
            divContainer.animate({
                top: -height * page
            },speed,function () {
                isFinish = true;
            });
            sideContainer.children().eq(page).addClass("sidebarActive").siblings().removeClass("sidebarActive");
        };
        if(navigator.userAgent.indexOf("Firefox")>0){
            if(document.addEventListener){
                document.addEventListener('DOMMouseScroll',scrollFunc,false);
            }
        }else{
            document.onmousewheel = scrollFunc;
        }
    })