vue项目中锚点定位实现scrollIntoView

前言

在平时的日常开发中，我们可能会遇到这样的需求，点击某个按钮或链接，页面会定位到指定元素上去（页面滚动到指定元素的位置）。
要实现一个类似锚点定位的效果，传统方法是用 a 标签的 href 属性和 id 属性来做。
但是在Vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面(路由)。 而且vue-router 用的是 hash 模式，不能使用传统 a 标签的方式来做锚点定位。
而后，发现 scrollIntoView() 方法，实测可用。

scrollIntoView

根据 MDN的描述，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。

参数

• alignToTop可选，布尔值：

  • 如果为 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。

示例

// vue项目中element换成目标DOM元素，如this.$el或this.$refs.XXX.$el
const element = document.getElementById("box");

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

scrollIntoViewIfNeeded

根据 MDN的描述，Element.scrollIntoViewIfNeeded（）方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。

非标准:  该特性是非标准的，请尽量不要在生产环境中使用它！

参数

• opt_center

  一个 Boolean 类型的值，默认为true:

  • 如果为 true，则元素将在其所在滚动区的可视区域中居中对齐。
  • 如果为 false，则元素将与其所在滚动区的可视区域最近的边缘对齐。根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

示例

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

element.scrollIntoViewIfNeeded();
element.scrollIntoViewIfNeeded(true);
element.scrollIntoViewIfNeeded(false);