今天介绍一种区别于<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发生改变。
