vue实现锚点跳转：scrollIntoView()

最新推荐文章于 2024-08-22 10:31:58 发布

原创最新推荐文章于 2024-08-22 10:31:58 发布 · 795 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

文章介绍了在Vue中如何使用scrollIntoView()方法实现元素的锚点跳转，包括如何滚动到特定元素如form或div的底部。通过示例代码展示了如何获取元素并调用方法使其回到可视区域。还详细解释了scrollIntoView的参数用法，如true和false分别对应元素顶部和底部对齐，以及通过配置对象实现平滑滚动的效果。需要注意的是，IE浏览器对某些高级参数的支持情况。

vue实现锚点跳转：scrollIntoView()

说明：
滚动到某个特定元素：scrollIntoView()；例如form表单或者div滚动到底部，

document.getElementsByClassName(‘’)或者document.getElementsById(‘’)

获取到元素后即可实现回到可视化区域（也可理解为回到顶部）。

使用案例：

<div> v-for="(value,index) in data" class="roll">{{...}}</div>

js部分

methods:{
  scrollToPosition(index){
     document.getElementsByClassName('roll')[index].scrollIntoView()
}

这样就利用scrollIntoView()简单实现了一个锚点跳转,下边讲解scrollIntoView中的一些属性：

scrollIntoView(true)相等于scrollIntoView();元素的顶端将和其所在滚动区的可视区域的顶端对齐
为true时相应的 scrollIntoViewOptions: {block: “start”, inline:
“nearest”}。这是这个参数的默认值。

scrollIntoView(false)元素的底端将和其所在滚动区的可视区域的底端对齐
为false时相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

同时他的参数也可以配置成一个object对象

  scrollIntoView({
  behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
  block：start//定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
  inline:nearest//"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
  })

其中smooth是平滑滚动 start和end是目标滚动到的位置
注意：兼容性的问题多数主流浏览器已经支持其基本功能，也就是说，使用true，false两个参数，来实现木讷的定位（没有滚动动画）是没有任何问题的，但是传入object参数时，IE各种版本会直接忽略，全部看成true参数属性，如果想看到滚动动画，使用火狐和chrome。