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>