Web前端实现锚点功能的三种方式

一、hash

这种方式非常简单，给待跳转元素添加 id，之后修改 window.location 即可，用法如

<div id="root"></div>

当需要跳转时可调用

window.location='#root';
// window.location.href='#root';
// window.location.hash='#root';

二、scrollIntoView

Element.scrollIntoView 方法会滚动元素的父容器，使元素显示在当前视窗内，用法如

<div id="root"></div>

当需要跳转时可调用

document.getElementById('root').scrollIntoView();

scrollIntoView 提供一些选项，允许开发者自定义滚动方式，选项包括

• behavior，定义动画过渡效果， "auto"或 "smooth" 之一。
  • 默认为 "auto"，没有动画；
  • 取值 "smooth"时，将匀速滚动。
• block，定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。
  • 默认为 "start"，元素顶部将滚动到视窗顶部；
  • 取值 "end"，元素底部将和视窗底部对齐；
  • 取值 "center"，元素中线将和视窗中间对齐；
  • 取值 "nearest"，元素将就近对齐。即，若页面向上滚动，则顶部对齐；若页面向下滚动，则底部对齐。
• inline，定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。
  • 默认为 "nearest"。含义同 block 选项的取值。

三、scrollTo/scrollBy

window.scrollTo 可将视窗滚动到指定的坐标。用法如：

window.scrollTo(xpos, ypos);

window.scrollBy 可将视窗向上下或左右移动指定坐标的距离。用法如：

window.scrollBy(xnum, ynum);

这种方式还需要实用 Element.getBoundingClientRect 来获取元素的大小及相对于当前视窗的位置。Element.getBoundingClientRect 的返回值包含 top、left、bottom、right、width 和 height 六个属性，除了 width 和 height 以外的属性均是相对于视窗的左上角来计算的。

以 HTML 根节点为滚动容器为例：

<div id="root"></div>

当需要跳转时可调用

const {scrollTop: domScrollTop, scrollLeft: domScrollLeft} = document.documentElement;
const {top: targetOffsetTop} = document.getElementById('root').getBoundingClientRect();

// 滚动 div#root 元素顶部到与视窗顶部对齐
window.scrollTo(domScrollLeft, domScrollTop + targetOffsetTop);
window.scrollBy(domScrollLeft, targetOffsetTop);

同理，滚动元素到与视窗底部或与视窗中间对齐亦可取参计算。