今天介绍一种区别于标签跳转页面的用法。

需求：

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

image.png

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

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

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名(即将跳转到的区域的名称)

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

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