简单js实现描点跳转+过渡效果简单的用js方法实现了页面描点跳转并且有过渡效果，能够使前端页面展示的“灵活灵现”，给大家

需求描述

我们在写项目的时候可能会遇到在本页面跳转并且需要加上过渡效果，能够使前端页面表现的“动起来”，看着不是那么的死板，今天给大家推荐一个简单的方法，希望能给大家带来帮助！话不多说直接上代码。

完整代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 24px;
            /* 作为容器，要开启滚动条 */
            overflow-y: auto;
        }
        .anchorsWrap {
            position: fixed;
            left: 480px;
        }

        h3 {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content" id="top">
        <div class="anchorsWrap">
            <h3 onclick="anchorJump('top')">回到顶部</h3>
            <br />
            <h3 onclick="anchorJump('one')">跳转到第一部分</h3>
            <br />
            <h3 onclick="anchorJump('two')">跳转到第二部分</h3>
            <br />
            <h3 onclick="anchorJump('three')">跳转到第三部分</h3>
            <br />
        </div>
        <div class="contentWrap">
            <div>
                <p>锚点跳转</p>
                <p>推荐使用</p>
                <p>某些场景</p>
                <p>更加方便</p>
            </div>
            <div>
                <!-- 锚点id -->
                <h3 id="one">第一部分</h3>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
                <p>第一部分</p>
            </div>
            <div>
                <!-- 锚点id -->
                <h3 id="two">第二部分</h3>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
                <p>第二部分</p>
            </div>
            <div>
                <!-- 锚点id -->
                <h3 id="three">第三部分</h3>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
                <p>第三部分</p>
            </div>
        </div>
    </div>

</body>
<script>
    function anchorJump(data) {
        const offsetTop = document.querySelector(`#${data}`).offsetTop;
        window.scrollTo({
            top: offsetTop,
            behavior: "smooth", // behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
        });
    }
</script>

</html>

每天一小步，成功一大步。