vue项目中如何给页面添加锚点链接

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第一天，点击查看活动详情.

问题引入

工作项目中用到了锚点定位,一开始用了a链接的锚点定位 结果出现了bug,我们的项目用的是哈希路由模式,所以#会被当做路由进行跳转,也就是在锚点链接进行跳转的时候,地址栏中的路径跟着发生了改变,由此导致在页面刷新后,因为并没有配置当前路由,就会跳到登录页.最后我找到了下面这种方法来解决这个bug,亲测有效.

代码实现

scrollIntoView

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。必须在页面容器可滚动时才能使用这个方法,不然无法触发此方法.

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

语法

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数

• 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"。

应用场景

• URL中hash标记的进化
• 聊天窗口滚动显示最新的消息
• 往一个列表添加item后滚动显示最新的添加的item
• 回到顶部(#)
• 滚动到指定位置(#xxx)

注意

取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。