JS 锚点跳转同一ID|极客笔记

JS 锚点跳转同一ID

在网页开发中，经常会遇到需要实现页面内跳转的需求。而在实现页面内跳转时，最常见的方式就是通过锚点来实现。而今天我们将重点讨论如何使用 JavaScript 实现在同一页面内跳转至相同ID的元素。

什么是锚点跳转

简单来说，锚点跳转是指在同一页面内，通过点击链接或按钮等操作，使页面快速滚动至指定的位置或元素的实现方式。常见的锚点跳转就是通过在链接中添加#符号以及对应的元素ID，浏览器会自动跳转至该ID所在的位置。

HTML基本结构

在实现锚点跳转之前，我们先来创建一个基本的HTML结构，包含若干个div元素，每个div元素都有一个唯一的ID，用于作为我们跳转的目标。

<!DOCTYPE html>
<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>Anchor Jump</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="section1" style="height: 500px; background-color: pink;"></div>
        <div id="section2" style="height: 500px; background-color: lightblue;"></div>
        <div id="section3" style="height: 500px; background-color: lightgreen;"></div>
    </main>
</body>
</html>

在上面的HTML结构中，我们包含了一个导航栏和三个不同颜色的div块，每个div块都有一个唯一的ID作为我们的跳转目标。

使用JavaScript实现锚点跳转

接下来我们使用 JavaScript 来实现在同一页面内跳转至相同ID的元素。我们可以通过监听导航链接的点击事件，然后使用scrollIntoView()方法来跳转至指定的元素。

<!DOCTYPE html>
<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>Anchor Jump</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#section1" class="nav-link">Section 1</a></li>
                <li><a href="#section2" class="nav-link">Section 2</a></li>
                <li><a href="#section3" class="nav-link">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="section1" style="height: 500px; background-color: pink;"></div>
        <div id="section2" style="height: 500px; background-color: lightblue;"></div>
        <div id="section3" style="height: 500px; background-color: lightgreen;"></div>
    </main>

    <script>
        // 获取所有导航链接
        const navLinks = document.querySelectorAll('.nav-link');

        // 遍历导航链接，为每个链接绑定点击事件
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault(); // 阻止默认行为，不跳转到href指定的链接

                const targetId = this.getAttribute('href').substring(1); // 获取目标元素的ID
                const targetElement = document.getElementById(targetId); // 获取目标元素

                // 跳转至目标元素
                targetElement.scrollIntoView({ behavior: 'smooth' });
            });
        });
    </script>
</body>
</html>

在上面的示例代码中，我们首先获取了所有的导航链接，并为每个链接绑定了点击事件。在点击链接时，我们阻止了默认的跳转行为，获取目标元素的ID并通过scrollIntoView()方法平滑滚动到目标元素的位置。