Vue锚点定位

VUE锚点定位

//   点击此处
 <div @click="goDingyue">立即订阅</div>

绑定事件

methods: {
 goDingyue() {
      // 获取元素在页面中的位置
      console.log(this.$refs.dingyue_box_ref.getBoundingClientRect());

      // document
      //   .getElementById("agentTitle")
      //   .scrollIntoView({ block: "start", behavior: "smooth" });
      // 跳转到指定位置并且平滑滚动
      this.$el
        .querySelector(".dingyue_box")
        .scrollIntoView({ block: "start", behavior: "smooth" });
    },
}

<div class="dingyue_box" ref="dingyue_box_ref">
      立即订阅内容
    </div>

 

然后获取页面位置等等

理解：getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

2.返回值类型：

　rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

scrollIntoView是一个与页面（容器）滚动相关的API（官方解释），该API只有boolean类型的参数能得到良好的支持（firefox 36+都支持），所以在这里只讨论参数Boolean类型的情况。

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；

参数为false时，使element的底部与视图（容器）底部对齐。

TIPS：页面（容器）可滚动时才有用！

document.getElementById("view").scrollIntoView();