Vue：滚动页面到指定位置实现避坑笔记

已于 2022-08-19 10:22:14 修改
阅读量449 收藏 2
点赞数 3
文章标签： vue.js javascript 前端
于 2022-08-19 10:19:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/han2434/article/details/126419182
版权
本文介绍了两种页面滚动定位的方法：一种是利用`scrollIntoView`平滑滚动到指定元素，另一种是直接使用`window.scrollTo`设置目标位置。在使用`scrollIntoView`时需要注意页面高度的设定，并且此方法会触发`scroll`事件。在进行页面滚动优化时，这些细节至关重要。
摘要由CSDN通过智能技术生成

方法：
mounted(){document.getElementById("Ebody").scrollIntoView( {behavior:"smooth"}//目标id，平滑移动 );
另一个：
mounted(){ window.scrollTo(200,200)//目标位置 }
避坑：页面记得设高度，调半天才发现
注意：页面若有监听scroll事件，scrollIntoView也会触发scroll事件的。
* 动态获取位置的请去参考大佬文章*

凉柚ˇ
关注
Vue和Vue-Element-Admin（十）：HTML和CSS快速学习笔记
叶子叶来
05-11 778
目录 html标签分类 网页布局 盒子模型 浮动 定位 css标签选择 flex布局 transform转换 Vue开发tips less和scss VScode常用插件 后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习笔记。 如果把页面理解成一台运转的机器，html使用标签（..
Vue中滚动页面回到指定位置
SANJIN0527_的博客
08-05 1225
方法1： // 可以用来获取top值 // 可以不用加单位，这样写的话就是让滚动到什么位置 document.documentElement.scrollTop = 300 方法2： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('box'); //在data中定义 t
vue3 页面滚动到指定位置
qq_44871531的博客
04-23 1284
vue3 页面滚动到指定位置,类似游览器的ctrl+F的功能
vue中点击按钮平滑滚动到页面某个div位置
weixin_42987138的博客
07-29 502
vue点击滚动到指定位置
jenesBangBang的博客
04-06 2145
offsetTop：元素的上边框与父元素的上边框的绝对距离。scrollTop：某个可滑动区块向下滚动的距离。
Vue滚动到指定位置的多种方式
wnk1997的博客
03-18 1798
不知道为啥，我试了下，只有scrollIntoView生效，并且虽然是滚动了，但是滚动的位置不对，其他的都没生效。原文：https://blog.csdn.net/qq_34241004/article/details/118692837。
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
蓝胖子的博客
11-07 3896
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
【最近项目小结】使用 Vue 实现一个简单的鼠标拖拽滚动效果插件(2)
2401_84435152的博客
05-01 659
发现有这一层，它把页面设置的很宽，很高，为了隐藏滚动条，所以设置，看了这一设置，突然灵光一现，难道它是用拖拽来触发滚动条的滚动，在细想，哇靠，这思路可行的，NB。
vue2从基础到高级学习笔记
weixin_45291798的博客
03-20 631
通过一个对象代理对另一个对象中的属性的操作（读写）获取obj2.x的值相当于获取obj.x的值，修改obj2.x的值同时修改obj.x的值。
selenium 移动到元素位置_selenium webdriver——JS滚动到指定位置
weixin_36210904的博客
02-11 1880
1.DOM滚动方法1、scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下，才滚动...
vue控制滚动条滑到某个位置
m0_55315930的博客
09-08 1万+
设置当前滑动到的距离，window.scrollTop(x,y) 传俩个值。 computed和watch之间的区别：
vue滑动到指定位置
追梦小狂魔的博客
08-12 1034
想要滑动的东西加上id即可，后面的数字是毫秒。
Vue系列：滚动页面到指定位置实现
MUYI1111的博客
12-07 2477
方法1：scrollTop 滚动到某位置 方法2：scrollTo，scrollBy，scroll滚动到某位置 方法3：scrollIntoView() 实现滚动到具体某元素 需注意，上述3种方法都不是平滑滚动 转载于:https://www.cnblogs.com/One-sprite/p/10083899.html...
Vue：滚动页面到指定位置实现
热门推荐
weixin_39583421的博客
01-29 1万+
在Vue中，有三种方式可以实现H5页面滑动至指定位置 方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targetbox.offsetTop; }) }) } //再滑动指定距离 document
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
最新发布
Z18834071903的博客
09-03 750
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
Vue进入页面将元素滚动到指定区域
weixin_51351053的博客
04-03 410
第二部 在mounted 生命周期种 获取元素调用scrollIntoView()方法元素显现出来。第一步 通过ref绑定需要显现的元素。
vue实现页面滑动至指定位置
个人博客 https://pnkx.top
03-17 3134
在Vue中，有三种方式可以实现页面滑动至指定位置 方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= t...
vue实现点击按钮滚动页面到指定位置
09-03
在Vue中实现点击按钮滚动页面到指定位置，可以通过以下步骤实现： 1. 首先，在你的Vue组件中，给按钮绑定一个点击事件。可以使用`@click`指令或者`v-on:click`来实现。例如： ```html <button @click="scrollToSection">滚动到指定位置</button> ``` 2. 在Vue组件的`methods`中定义`scrollToSection`方法，用来处理按钮点击事件。在该方法中，可以使用原生的JavaScript代码来实现滚动效果。例如： ```javascript methods: { scrollToSection() { // 获取目标元素 const targetElement = document.getElementById('target-section'); // 使用scrollIntoView方法进行滚动 targetElement.scrollIntoView({ behavior: 'smooth' }); } } ``` 3. 在你的页面上添加一个具有唯一标识的目标元素，该元素就是滚动到的位置。例如： ```html <section id="target-section"> <!-- 这是你要滚动到的位置 --> </section> ``` 这样，当按钮被点击时，页面就会平滑地滚动到指定的位置。 请注意，以上代码只是一个示例，具体实现方式可能根据你的项目结构和需求而有所不同。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凉柚ˇ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值