锚点即指 html 中的链接，在页面中适当的添加锚点可以大大提高阅读或查找效率

前言

锚点是网站中常用的功能。前端简单实现锚点的方法，使用 a 标签把 href 属性写成要跳转到的元素 id，比如以下代码：

<a href="#anchor"></a>

<div id="anchor"></div>

点击 a 标签页面就会跳转到指定 id 元素的位置。并改变链接地址比如：http://www.xxxx.com#anchor。

虽然不会有什么问题，直接跳转过去立马完成产品的需求，但是当网页中存在多个锚点时，就会出现点击浏览器后退按钮并不会返回之前浏览的网页，而是返回上一个带有锚点的链接。

举个例子，当前网站链接是 http://www.xxxx.com#anchor2， 当用户想返回之前的页面，点击后退按钮后，链接变成了 http://www.xxxx.com#anchor1。但还是在同一个页面中，会使用户感到迷惑，降低用户体验。

解决问题

scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，详见 MDN 对此方法介绍。

简单代码实现：

<!-- HTML -->
<div onclick='getAnchor('anchor_1')'>定位到锚点一</div>
<div onclick='getAnchor('anchor_2')'>定位到锚点二</div>

<div id='anchor_1'>锚点位置一</div>
<div id='anchor_2'>锚点位置二</div>

<!-- JS -->
function getAnchor (id) {
    // 跳转到锚点
    document.getElementById(id).scrollIntoView()
}

如果需要让页面平滑滚动到指定位置，则需要增加参数 behavior 设置其值为 smooth

document.documentElement.scrollIntoView({
    behavior: "smooth",
    block: "start",
    inline: "nearest"
});

其他使用场景

回到顶部 也是网页中常用功能。

简单代码实现 document.querySelector('html').scrollIntoView()

结语

本文只是简单介绍了使用方法，想要详细了解的话，可以参考张鑫旭的这篇文章：CSS scroll-behavior 和 JS scrollIntoView 让页面滚动平滑