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

最新推荐文章于 2022-06-10 17:18:29 发布

慕容二狗i

最新推荐文章于 2022-06-10 17:18:29 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_30288631/article/details/100887412

版权

js 专栏收录该内容

4 篇文章 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>

慕容二狗i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq简单实现点击某个元素页面缓慢滚动到另一个元素位置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .jump-group { display: flex; ...
复制链接

扫一扫