jQuery实现电梯导航效果

原理
每个盒子的索引值和每个按钮的索引一一对应,然后运动到相对应的盒子上 也就是scrollTop的值

成果图

 <style>
        .box2 {
            position: relative;
            width: 600px;
            height: 500px;
            background-color: pink;
        }
        
        .box3 {
            position: relative;
            width: 600px;
            height: 500px;
            background-color: rebeccapurple;
        }
        
        .box4 {
            position: relative;
            width: 600px;
            height: 500px;
            background-color: gold;
        }
        
        .box5 {
            position: relative;
            width: 600px;
            height: 500px;
            background-color: red;
        }
        
        .go {
            background-color: gray;
            display: none;
            position: fixed;
            right: 10px;
            bottom: 100px;
        }
        
        button {
            display: block;
        }
    </style>
-----------------------------------------------------


    <div class="con">
        <div class="box2">手机区域</div>
        <div class="box3">电脑区域</div>
        <div class="box4">电视区域</div>
        <div class="box5">冰箱区域</div>
    </div>
    <div class="go">
        <button>back手机区域</button>
        <button>back电脑区域</button>
        <button>back电视区域</button>
        <button>back冰箱区域</button>
    </div>
    ---------------------------------------------
    <script>
        $(function() {
            //刷新之后回到顶部
            $('html,body').stop().animate({
                    scrollTop: 0
                })
                //固定栏的显示隐藏
            var box3Top = $('.box3').offset().top;
            $(window).scroll(function() {
                if ($(document).scrollTop() >= box3Top) {
                    $('.go').fadeIn();
                } else {
                    $('.go').fadeOut();
                }
            })
        })

        // 电梯效果
        //点击按钮,就跳到对应的div
        $('.go button').click(function() {
            //获取相对应的div到顶部的距离
            var boxTop = $('.con div').eq($(this).index()).offset().top;
            //跳到对应的div
            $('html,body').stop().animate({
                scrollTop: boxTop
            })
        })
    </script>