今天介绍一种区别于<a href="定义的id">标签跳转页面的用法。

需求：
当点击导航栏上的某一个菜单按钮时，快速跳转到当前页面指定的区域。

image.png

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发生改变。