vue 使用Api scrollIntoView()锚点跳转与普通a标签锚点跳转

背景:在做公司项目的时候因为某项纪录的模块查看太多,为了用户更好的查看体验,决定开发一个侧边导航栏,通过点击导航栏进行精确定位移动到某项纪录上.

H5 Api scrollIntoView()方法

一.方法介绍

1.Element.scrollIntoView()

语法

element.scrollIntoView(alignToTop,scrollIntoViewOptions)

说明

alignToTop:可选Boolean参数,如果不填写,默认是true

如果为true :  元素的顶端将和其所在滚动区的可视区域的顶端对齐
如果为false:  元素的底端将和其所在滚动区的可视区域的底端对齐

scrollIntoViewOptions:可选Object参数,

behavior : 定义动画过渡效果，  "auto"或 "smooth" 之一。默认为 "auto"
block  	 : 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline   : 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"

<div id='box'></div>
<script>
 let Element = document.getElementById('box')
 Element.scrollIntoView({ //没有写Boolean参数 ,默认是true;
 		behavior: "smooth",
        block: "start", 
        inline: "start"	
})
//滚动到这个DOM节点位置
</script>
12345678910

浅谈:解决跳转更改路径问题,不局限于a标签锚点跳转,可以是一个div 或者任意标签,只要获取到对应的DOM节点,皆可以跳转,增加了过渡动画

二.功能具体实现

1、在产品介绍按钮上绑定一个click点击事件；

<div class="button_index" @click="counter1">查看某功能</div>

2、在你点击跳转的产品介绍详情区域的最外层div上添加一个id;

<div class="product" id="productId"></div>

3、在methods方法中写入以下代码；

counter1() {  //counter1是绑定的点击事件名称
        const returnEle = document.querySelector("#productId");  //productId是将要跳转区域的id
        if (!!returnEle) {
          returnEle.scrollIntoView(true); // true 是默认的
        }
        document.querySelector("counter1").scrollIntoView(true); //这里的counter1是将要返回地方的id
      }

到这里，就实现当前页跳转的效果了。

a标签的用法：

1、a标签上写上一个id名（即将跳转到的区域的名称）

<div><a href="#productid">产品介绍</a></div>       

2、在你点击跳转的产品介绍详情区域的最外层div上添加一个id;

<div class="product" id="productId"></div>

以上两步就实现跳转效果了，但是a标签的跳转会使url发生改变。

以上内容参考了作者：web28,链接：www.jianshu.com/p/9cfab6d9d…