您现在的位置是：网站首页> 编程资料编程资料

vue中如何实现锚点定位平滑滚动_vue.js_

2023-05-24 315人已围观

简介 vue中如何实现锚点定位平滑滚动_vue.js_

vue锚点定位平滑滚动

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

html

//给div盒子设定单击事件和ref名 点击滑动到此位置

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

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

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

定义

scrollTo(xpos,ypos),包含两个必须属性

xpos（指定滚动到X轴指定位置）
ypos（指定滚动到X轴指定位置）

使用：

// 滚动到指定位置window.scrollTo(100,500)

scrollTo(options)，包含三个必须属性

top (y-coord) 相当于y轴指定位置
left (x-coord) 相当于x轴指定位置
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto

使用：

// 设置滚动行为改为平滑的滚动 window.scrollTo({ top: 1000, behavior: "smooth" });

兼容

适用于pc端和移动端，scrollTo（options）属性不兼容 IE

在这里插入图片描述

使用

// vue中使用 // 标题  {{ item }} 
 // 分类tit 资产账户
 // 分类内容
信贷服务
 // 分类内容
金融服务
 // 分类内容
 data() { return { titAll: ["资产账户", "信贷金融", "经融服务"], //初始选中 isactive: 0, }; }, methods: { tabsColor(index) { // 切换选中样式 this.isactive = index; // 获取对应iddom const tabsId = document.querySelector(`#tabs${index}`); // 判断进行平滑滚动 if (tabsId) { window.scrollTo({ top: tabsId.offsetTop, behavior: "smooth", }); } }, },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：Element-Plus之el-col与el-row快速布局_vue.js_

下一篇：vite与xcode环境变量配置记录详解_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

vue中如何实现锚点定位平滑滚动_vue.js_

目录

vue锚点定位平滑滚动

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

定义

兼容

使用

相关内容

点击排行

本栏推荐

猜你喜欢