爬楼

「爱情、让人受尽委屈。」 2021-12-10 14:07 280阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            .div1{
                width: 90%;
                margin: 0 auto;
                height: 700px;
                background: red;
                color: #fff;
                line-height: 700px;
                font-size: 100px;
                text-align: center;
            }
            .div2{
                width: 90%;
                margin: 0 auto;
                height: 700px;
                background: pink;
                color: #fff;
                line-height: 700px;
                font-size: 100px;
                text-align: center;
            }
            .div3{
                width: 90%;
                margin: 0 auto;
                height: 700px;
                background: green;
                color: #fff;
                line-height: 700px;
                font-size: 100px;
                text-align: center;
            }
            .div4{
                width: 90%;
                margin: 0 auto;
                height: 700px;
                background: blue;
                color: #fff;
                line-height: 700px;
                font-size: 100px;
                text-align: center;
    
            }
    
            .nav{
                width: 80px;
                height: 204px;
                position: fixed;
                right: 20px;
                bottom: 40px;
            background: #b6b6b6;
    
            }
            .nav li{
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
                border-top: 1px solid #b6b6b6;
            }
        </style>
    </head>
    <body>
    <ul class="nav">
        <li>div1</li>
        <li>div2</li>
        <li>div3</li>
        <li>div4</li>
    </ul>
        <div class="div1">我是DIV1</div>
        <div class="div2">我是DIV2</div>
        <div class="div3">我是DIV3</div>
        <div class="div4">我是DIV4</div>
    </body>
    <script src="../jquery.2.2.4.js"></script>
    <script>
    
        $(".nav").children("li").click(function(){
            // 获取点击元素的索引
            // console.log($(this).index())
            // 根据索引，拿到对应的div
            // console.log($("div").eq($(this).index()))
            // 根据div获取自己的距离顶部的距离
            // console.log($("div").eq($(this).index()).offset().top)
    
            // 无动画版
            // 设置给document的scrollTop
            // $(document).scrollTop($("div").eq($(this).index()).offset().top)
            
            // 动画版
            $("html").animate({
                scrollTop:$("div").eq($(this).index()).offset().top
            })
        })
    
    </script>
    </html>

转载于:https://www.cnblogs.com/sansancn/p/10973269.html