Vue中如何设置锚点实现页面平滑滚动定位？

本文共计600个文字，预计阅读时间需要3分钟。

目录 + Vue定位滚动条 + Vue点击tabs滚动条（点击事件） + 定义 + 兼容 + 使用 + Vue点击定位滚动条 + 以下是简单的代码，可直接使用 + HTML + // 给div盒子设置单击事件和ref名div + @click=getThere + ref=cat

目录

• vue锚点定位平滑滚动
• vue点击tabs平滑滚动(锚点事件)
• 定义
• 兼容
• 使用

vue锚点定位平滑滚动

下面是简单的代码，拿来即用

html

//给div盒子设定单击事件和ref名 <div @click="getThere" ref="cat_box">点击滑动到此位置</div>

methods: {  getThere() {       // 通过ref名获取元素在页面中的位置并滚动至此       this.$el.querySelector(".cat_box")       .scrollIntoView({ block: "start", behavior: "smooth" });       }, }

vue点击tabs平滑滚动(锚点事件)

避免切换速度过快显得突兀，在不使用 a 标签以及添加 class类 进行锚点操作时，这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。