JS 点击锚点 - Javascript

在网页中，经常会有在页面内跳转的需要，比如跳转到文章的某个章节或者页面中的某个位置。这时候，我们就可以使用锚点来实现页面内跳转的功能。

通过JS，我们可以实现在点击按钮时自动滑动到指定的锚点位置。在本篇文章中，我们将学习如何通过JS实现点击锚点的功能。

实现方式

HTML锚点

首先，在HTML中添加锚点，我们可以在目标位置添加一个id属性，用来定义锚点，比如：

<h2 id="content1">这是文章的第一章</h2>

然后，我们可以在页面中添加跳转链接，href属性指向锚点的id。

<a href="#content1">跳转到第一章</a>

添加完跳转链接后，我们点击该链接，页面就会自动跳转到锚点所在的位置。

JS实现点击锚点

接下来，我们使用JS来实现点击按钮后自动滑动到指定的锚点位置。

首先，我们需要获取页面中所有的锚点链接。

const anchorLinks = document.querySelectorAll('a[href^="#"]');

然后，为每个锚点链接添加点击事件，当链接被点击后，我们就可以通过scrollIntoView方法滑动到指定的锚点位置。

anchorLinks.forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault(); // 阻止默认跳转事件
    document.querySelector(link.getAttribute('href')).scrollIntoView({
      behavior: 'smooth' // 平滑滚动
    });
  });
});

至此，我们就完成了点击锚点的JS实现。

完整代码

// 获取所有锚点链接
const anchorLinks = document.querySelectorAll('a[href^="#"]');

// 为锚点链接添加点击事件
anchorLinks.forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault(); // 阻止默认跳转事件
    document.querySelector(link.getAttribute('href')).scrollIntoView({
      behavior: 'smooth' // 平滑滚动
    });
  });
});

结语

通过本文的介绍，我们学习了如何使用JS实现点击锚点的功能。希望对你有所帮助！