Vue之点击滑动到页面指定位置方式(点击下滑滚动)
更新时间：2026年07月02日 08:44:05 作者：麻辣翅尖
本文详细介绍了利用scrollIntoView()方法、scrollTop属性及a标签锚点三种方法实现页面滚动操作,特别强调了scrollIntoViewOptions参数的使用,适合前端开发者参考
三种方法
<div @click="go">点击下滑</div> <div id="show" ref="view">展示</div>
1、利用scrollIntoView()方法
该方法将调用它的元素滚动到浏览器窗口的可见区域（根据其他元素的布局，元素可能无法完全滚动到顶部或底部）
ps：页面可滚动时才有用！！！可通过设置css实现
methods:{
go(){
document.getElementById("show").scrollIntoView();
/*或
document.querySelector("#idshow").scrollIntoView();
或
this.$refs.view.scrollIntoView();
*/
}
}
scrollIntoView提供了scrollIntoViewOptions对象参数
| scrollIntoViewOptions | 定义过渡动画 |
|---|---|
| behavior | 定义缓慢动画，可选值：auto、instant 或 smooth。默认为 auto |
| block | 定义垂直方向的对齐，可选值：start，center，end 或 nearest。默认为 center |
| inline | 定义水平方向的对齐，可选值：start，center，end 或 nearest。默认为 nearest |
示例：缓慢移动至目标
function Go () {
document.getElementById('kinds').scrollIntoView({ behavior: 'smooth' })
}
2、通过scrollTop设置滚动距离
（1）scrollTop=0,没有滚动
（2）scrollTop>0,有滚动距离，但没有滚动到底部
（3）scrollTop=scrollHeight-clientHeight,滚动到了底部
//监听scroll
this.$refs.wrapper.addEventListener('scroll', this.judgeScroll);
methods:{
goAnchor(){
this.$refs.view.scrollTop = 距离
}
}
3、使用a标签锚点
不适合在vue.js项目中使用，会干扰路由里的hash值
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现平滑过渡的拖拽排序功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue处理循环数据流程，这个又是一个编程语言， 模版语法里面必不可少的一个， 也是使用业务场景使用最多的一个环节。所以学会使用循环也是重中之重了2023-04-04
文章介绍了在Vue3项目中实现错误捕获和邮件报错上报的方法,首先使用了`errorHandler`全局错误捕获,接着通过Nodemailer发送邮件实现错误上报功能,过程中遇到一些坑,如需本地调试需用node启动服务,同时总结了两种方案的,包括直接存在的问题和限制2026-04-04
在本篇文章里小编给大家整理了关于vue下canvas裁剪图片实例讲解内容，需要的朋友们可以参考下。2020-04-04
这篇文章主要给大家介绍了关于Vue3更高效的构建工具Vite使用的相关资料,Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验,需要的朋友可以参考下2023-10-10
解决vue报错:Do not mutate vuex store state outside mutati
这篇文章主要介绍了解决vue报错:Do not mutate vuex store state outside mutation handlers问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
Vite是新一代的前端开发与构建工具,相比于传统的webpack,Vite 有着极速的本地项目启动速度(通常不超过5s)以及极速的热更新速度(几乎无感知),下面这篇文章主要给大家介绍了关于webpack转vite的详细操作流程与问题总结的相关资料,需要的朋友可以参考下2023-03-03
本文将详细介绍如何在Vue3中实现一个每秒钟自动更新的网页时钟,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要介绍了在Vue3项目中使用MQTT.js库实现数据获取的步骤,包括安装库、创建MQTT连接、发送和接收消息、配置安全选项等,并提供了一个完整的示例代码和常见问题解决方法,需要的朋友可以参考下2025-11-11
a vue component，基于vue的表格组件，主要解决大数据量的表格渲染性能问题，使用canvas绘制表格，同时支持类似excel的批量选中，复制黏贴删除，实时编辑等功能.这篇文章主要介绍了基于vue+canvas的excel-like组件,需要的朋友可以参考下2017-11-11
最新评论