jq简单实现点击某个元素页面缓慢滚动到另一个元素位置

亦凉 2024-04-19 09:06 68阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .jump-group {
            display: flex;
            text-align: center;
    
        }
    
        .jump {
            cursor: pointer;
            flex: 1;
        }
    
        .content {
            margin: 20px auto;
            height: 500px;
            width: 80%;
        }
    
        #content1 {
            background-color: #2ab27b;
        }
    
        #content2 {
            background-color: #6b9dbb;
        }
    
        #content3 {
            background-color: #b6a338;
        }
    
        #content4 {
            background-color: #c7254e;
        }
    </style>
    <body>
    <div class="jump-group">
        <div class="jump" j-to="content1">跳跳1</div>
        <div class="jump" j-to="content2">跳跳2</div>
        <div class="jump" j-to="content3">跳跳3</div>
        <div class="jump" j-to="content4">跳跳4</div>
    </div>
    <div class="content" id="content1"></div>
    <div class="content" id="content2"></div>
    <div class="content" id="content3"></div>
    <div class="content" id="content4"></div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $('.jump').click(function () {
            //通过点击元素获取目标元素的id值
            var target = $(this).attr('j-to');
            //获取目标元素距离屏幕顶部的高度
            var target_roll_height = $('#' + target).offset().top;
            //滚动
            $("html,body").animate({scrollTop: target_roll_height}, 100);
        })
    </script>
    </html>