vue项目使用scrollIntoView实现锚点定位

最新推荐文章于 2024-05-07 01:12:52 发布
最新推荐文章于 2024-05-07 01:12:52 发布
阅读量1.7k 收藏 6
点赞数 2
分类专栏： 方法 vue 前端bug 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36939346/article/details/108126056
版权
方法 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
vue
9 篇文章 1 订阅
订阅专栏
前端bug
5 篇文章 0 订阅
订阅专栏

用a标签href尝试后，功能可以实现，但是路径会变成锚点的id，刷新页面跳转出现错误

后来尝试使用scrollIntoView，可以实现相同的功能。

我是根据id跳转的，点击左侧导航的时候，获取id，然后给右侧的div绑上动态 的id

document.getElementById(item.id).scrollIntoView()
document.getElementById(item.id).scrollIntoView({
        behavior: "smooth" // 平滑过渡
      })

 

也可以设置平滑过渡，增加用户体验

 

西鱼
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue锚链接(两种方法) scrollIntoView
sunshineTing2的博客
12-21 2045
第一种：常见 锚链接，id和 href 结合起来 <div id="one" style="height: 300px;">第一</div> <div id="two" style="height: 300px;">第二</div> <a href='#one'>回到第一</a> <a href='#two'>回到第二</a> 在vue项目中可能会导致第一次点击没有效果，第二次点击才跳到对应位置， 因为在 r
scrollIntoView实现简单的锚点定位（示例：选择城市列表）
12程序猿的博客
07-13 1393
scrollIntoView实现简单的锚点定位（示例：选择城市列表）
vue 点击按钮移动到指定位置--scrollIntoView()
weixin_38673922的博客
06-20 1954
scrollIntoView() 锚点
将元素移动到页面顶部vue3示例（scrollIntoView方法）
最新发布
weixin_50961467的博客
05-07 445
当传入参数true时，相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}当未传入参数时，默认值为：{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}tab.scrollIntoView（）;注：如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。注：如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。
Vue项目中实现描点跳转scrollIntoView-案例
JackieDYH的博客
06-06 1165
【代码】Vue项目中实现描点跳转scrollIntoView-案例。
DOM操作scrollIntoView，实现点击目录跳转对应元素id，置顶到头部
孜然卷的博客
03-27 191
【代码】DOM操作，实现点击目录跳转对应元素id，置顶到头部。
vue中锚点定位scrollIntoView
weixin_44707050的博客
02-19 449
使用element.scrollIntoView跳转。
vue 双向锚点实现 简易版（scrollIntoView）
lemon今天学习了吗？的博客
11-11 4847
一. 需求：左边是内容板块，右边是目录结构，点击右边内容跳转到左边相应位置展示，滑动左边内容右边目录自动跳转。
vue 中 scrollIntoView
weixin_45972345的博客
04-22 4678
vue 中使用 scrollIntoView <div class="item_type" :id="item.id"> <span >{{item.label}}</span> </div> document.getElementById(item.id).scrollIntoView() scrollIntoView({ behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 block
#vue# vue锚点定位，滚动到具体位置
ZHENGCHUNJUN的博客
12-17 1234
需求： 点击导航栏的各个tab，跳转（滚动）到当前页面的具体位置 步骤： （1）首先在导航栏的版块里面加入方法goToAnchor，以及在（'#跳转的id类名'） <div class="nav-item-center"> <div @click="goToAnchor('#About')" >About</div> <div @click="goToAnchor('#Tokenomics')">Tokenomics<.
vue实现锚点跳转之scrollIntoView()方法
u010227042的博客
08-03 1358
滚动到某个特定元素 ：scrollIntoView()；这个方法不用获取右边小标题的高度，啥都不用，有id或者class就行啦，几乎可以满足你锚点跳转的所有需求，对齐方式，以及平滑滚动了 这里是v-for循环出来需要点击跳转到对应div的事件 <p> v-for="(value,index) in data" @click="scrollToPosition(index)">{{...}}</p> 这就是你点击scrollToPosition事件需要滚动对应的div..
提交页面的定位–scrollIntoView的用法
01-20
提交页面定位问题一直骚扰我，比如我们在DataGrid外面加了来使DataGrid在一定区域内呈现，这样如果把滚动条拉到底部的时候点击修改（或者修改后点击更新，取消）页面重新加载的时候都会把滚动条拉到页面最上面部分 ，特此我将下面知识共享一下: object.scrollIntoView( [bAlignToTop]) Parameters bAlignToTop Optional. Boolean that specifies one of the following values: true Default. Scrolls the object so that top o
详解Vue项目中实现锚点定位
10-17
主要介绍了Vue项目中实现锚点定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue监听滚动实现锚点定位(双向)示例
10-16
今天小编大家分享一篇Vue监听滚动实现锚点定位(双向)示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中锚点定位替代方式
10-16
今天小编就为大家分享一篇vue项目中锚点定位替代方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中实现锚点定位以及平滑滚动到指定位置
热门推荐
重楼的博客
10-10 1万+
Vue锚点定位传统方式遇到的问题解决办法scrollTop或者scrollIntoView 传统方式遇到的问题 原生网页做锚点跳转一般使用id和a标签的href实现: <h1 id="title">title</h1> <a href="#title">跳转到title</a> 在Vue-router中，如果使用的是history模式，当点击超链接时，URL地址会加上#title，导致hash值改变,导致需要多次点击返回才能返回到上一页面。 解决办法 scr
基于Vue+TS，使用scrollIntoView()实现锚点定位
nicole27ll的博客
04-09 1604
1、获取需要定位的元素的DOM，可以使用querySelectorAll（根据元素类型或者id获取）或使用ref获取元素DOM，注意：使用ref获取DOM，命名必须是唯一的，就算取相同的名字，最后也只能拿到一个DOM。 //模板内容 //需要跳转的元素 <span id="buttton">buntton</span> <div id="ref_pdf_view" ref="ref_pdf_view">马上就轮到我展示了1</div> <div i
微信小程序scroll-view的scroll-into-view无效问题解决办法
weixin_55109596的博客
02-14 7571
轻松解决微信小程序scroll-view的scroll-into-view无效问题
vue 滚动定位、锚点跳转 到指定元素位置scrollIntoView
未末的博客
01-11 1925
html <div v-for="(item,index) in xx" :key="index" :id="'audioTime1'+ Object.values(item)[1]"> </div> 滚动方法 // 滚动 goAnchor(selector) { // console.log(selector) // console.log(this.$el) //id的形式 this.$el.querySelector
Vue项目通过scrollIntoView实现锚点点击页面平滑滚动
03-28
在Vue项目中，我们可以通过scrollIntoView方法实现锚点点击页面平滑滚动。 首先，在需要滚动的元素上绑定一个ref属性： ```html <div ref="scrollElem">需要滚动的元素</div> ``` 然后，在对应的锚点上绑定一个点击事件，触发滚动操作： ```html <a @click="scrollToElem">锚点</a> ``` 在Vue组件中，定义scrollToElem方法，通过ref获取需要滚动的元素，并调用scrollIntoView方法实现平滑滚动： ```js methods: { scrollToElem() { this.$refs.scrollElem.scrollIntoView({ behavior: 'smooth', // 平滑滚动 block: 'start' // 滚动到元素顶部 }) } } ``` 这样，当点击锚点时，页面就会平滑滚动到对应的元素位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值