楼层式的主页

天气冷了，做做广播体操~

            第三套广播体操--时代在召唤

做完了，回到正文上

先上效果图，有图有真相

我只是做了个简单的demo，漂亮的样式自己去设计，毕竟我只是敲代码的

html部分

<!--导航条 -->
        <div class="nav">
            <ul>
                <li class="active"><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li class="last">回到顶部</li>
            </ul>
        </div>
        <!--楼层内容-->
        <div class="header">
            首页
        </div>
        <div class="main">
            <div class="floor one">1</div>
            <div class="floor two">2</div>
            <div class="floor there">3</div>
            <div class="floor four">4</div>
        </div>

        <div class="footer">
            <span>底部</span>
        </div>

敲下黑板，咚~咚~咚~

js部分

<script src="js/jquery.min.js"></script>
        <script>
            $(function(){
                //1.楼梯什么时候显示
                $(window).on('scroll',function(){
                    var $scroll=$(this).scrollTop();
                    if($scroll>=800){
                        $('.nav').show();
                    }else{
                        $('.nav').hide();
                    }

                    //4.拖动滚轮，对应的楼梯样式进行匹配
                    $('.floor').each(function(){
                        var $loutitop=$('.floor').eq($(this).index()).offset().top+200;
                        if($loutitop>$scroll){//楼层的top大于滚动条的距离
                            $('.nav li').removeClass('active');
                            $('.nav li').eq($(this).index()).addClass('active');
                            return false;//中断循环
                        }
                    });
                });

                //2.获取每个楼梯的offset().top,点击楼梯让对应的内容模块移动到对应的位置  offset().left        
                var $loutili=$('.nav li').not('.last');
                $loutili.on('click',function(){
                    $(this).addClass('active').siblings('li').removeClass('active');
                    var $loutitop=$('.floor').eq($(this).index()).offset().top;
                    //获取每个楼梯的offsetTop值
                    $('html,body').animate({//$('html,body')兼容问题body属于chrome
                        scrollTop:$loutitop
                    })
                });
                //3.回到顶部
                $('.last').on('click',function(){
                    $('html,body').animate({//$('html,body')兼容问题body属于chrome
                        scrollTop:0
                    })
                });
            })
        </script>

css部分

*{margin: 0;padding: 0;list-style: none;}
        .nav{
            position: fixed;
            width: 40px;
            top: 100px;
            left: 50px;
            border: 1px solid #1A9909;
        }
        .nav ul li{
            width: 100%;
            line-height: 30px;
            border-bottom: 1px dotted #DDDDDD;
            background: #918888;
            text-align: center;
            cursor: pointer;
            padding: 10px 0;
        }
        .nav ul li.last{
            background: #288BC4;
        }
        .nav ul li.active{
            background: #C9302C;
            display: block;
        }
        .nav ul li:hover{
            background: #5CB85C;
            display: block;
        }
        .header{
            width: 100%;
            height: 820px;
            background: #C9302C;
            text-align: center;
            line-height: 600px;
        }
        .main{
            width: 100%;

        }
        .floor{
            height: 850px;
            width: 100%;
            line-height: 600px;
            text-align: center;
        }
        .one{background: orange;}
        .two{background: yellow;}
        .there{background: greenyellow;}
        .four{background: deepskyblue;}

        .footer{
            width: 100%;
            height: 400px;
            line-height: 400px;
            text-align: center;
            background: #A6E1EC;
        }

努力工作，我们会有猫的