爬楼

最新推荐文章于 2023-07-17 14:42:13 发布

weixin_30809333

最新推荐文章于 2023-07-17 14:42:13 发布

阅读量165

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sansancn/p/10973269.html

版权


        <!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