HTML 使用 JavaScript 实现锚点跳转

在本文中，我们将介绍如何使用 JavaScript 来实现 HTML 中的锚点跳转。

阅读更多：HTML 教程

什么是锚点跳转？

锚点跳转是指在网页中点击一个链接或按钮后，页面会滚动到指定的位置。通常情况下，我们可以通过设置锚点（anchor）以及对应的链接来实现这一功能。不过，在某些特殊场景下，我们可能需要借助 JavaScript 来进行复杂的操作。

使用 JavaScript 实现锚点跳转

在 HTML 中设置锚点时，通常我们可以通过设置id属性来标记需要跳转到的位置。例如，我们有一个导航栏，其中包含了多个链接，每个链接对应网页中的不同章节。这时，我们可以使用 JavaScript 来实现点击导航链接后页面的平滑滚动效果。

首先，可以在 JavaScript 中监听导航链接的点击事件：

const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach((link) => {
  link.addEventListener("click", (event) => {
    event.preventDefault(); // 阻止链接默认的跳转行为
    smoothScroll(link.getAttribute("href")); // 获取链接的目标位置，并进行平滑滚动
  });
});

上述代码中，我们首先使用querySelectorAll获取所有的导航链接元素，并使用forEach遍历它们。对于每个链接，我们都为其添加了一个点击事件监听器。在该事件监听器中，我们调用了一个名为smoothScroll的函数，该函数将实现页面平滑滚动的效果。

接下来，我们需要实现smoothScroll函数：

function smoothScroll(target) {
  const targetElement = document.querySelector(target);
  const targetPosition = targetElement.offsetTop;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 1000; // 滚动的总时长，单位：毫秒
  let startTime = null;

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  function scroll(currentTime) {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(scroll);
  }

  requestAnimationFrame(scroll);
}

在smoothScroll函数中，我们首先获取了目标元素的位置信息，然后计算滚动的距离和滚动过程的总时长。接着，我们使用了一个名为ease的缓动函数来实现平滑滚动的效果。最后，我们使用window.scrollTo方法来实现页面的滚动，并持续调用scroll函数来不断更新页面的滚动位置，直到时间超过设定的时长。

实例演示

<html>
  <head>
    <style>
      .section {
        height: 500px;
        margin-bottom: 200px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
      }
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #f5f5f5;
        padding: 20px;
        display: flex;
        justify-content: center;
      }
      .nav a {
        margin: 0 10px;
        text-decoration: none;
        color: black;
      }
    </style>
    <script>
      // JavaScript 代码省略
    </script>
  </head>
  <body>
    <div class="nav">
      <a class="nav-link" href="#section1">Section 1</a>
      <a class="nav-link" href="#section2">Section 2</a>
      <a class="nav-link" href="#section3">Section 3</a>
    </div>
    <div id="section1" class="section">Section 1</div>
    <div id="section2" class="section">Section 2</div>
    <div id="section3" class="section">Section 3</div>
  </body>
</html>