vue实现锚点跳转之scrollIntoView()方法详解_vue.js_

vue锚点跳转scrollIntoView()方法

滚动到某个特定元素 

scrollIntoView()；这个方法不用获取右边小标题的高度，啥都不用，有id或者class就行啦，几乎可以满足你锚点跳转的所有需求，对齐方式，以及平滑滚动了

这里是v-for循环出来需要点击跳转到对应div的事件

 v-for="(value,index) in data" @click="scrollToPosition(index)">{{...}}
  

这就是你点击scrollToPosition事件需要滚动对应的div

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

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 

一个简单的vue锚点跳转demo

拿去直接粘贴就可

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！