vue 实现锚点跳转

1,405 阅读1分钟
anchorJump() {
    const anchorEle = document.querySelector("#anchor");
    if (!!anchorEle ) {
      anchorEle.scrollIntoView(true); //函数详解见下
    }
  }


document.querySelector("要返回地方的id").scrollIntoView(true);

用法:

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
alignToTop 是一个Boolean值:
  • 如果true,则元素的顶部将与可滚动祖先的可见区域的顶部对齐。
    对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}
    这是默认值。
  • 如果false,则元素的底部将与可滚动祖先的可见区域的底部对齐。
    对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}

scrollIntoViewOptions 是具有以下属性的对象:
behavior定义过渡动画。
其中一个"auto""smooth"默认为"auto"

block定义垂直对齐方式。
"start""center""end",或"nearest"默认为"start"

inline定义水平对齐方式。
"start""center""end",或"nearest"默认为"nearest"