今天介紹一種區(qū)別于<a href="定義的id">標簽跳轉(zhuǎn)頁面的用法熊锭。
需求：
當點擊導(dǎo)航欄上的某一個菜單按鈕時，快速跳轉(zhuǎn)到當前頁面指定的區(qū)域雪侥。
image.png
1碗殷、在產(chǎn)品介紹按鈕上綁定一個click點擊事件；
<div class="button_index" @click="counter1">產(chǎn)品介紹</div>
2速缨、在你點擊跳轉(zhuǎn)的產(chǎn)品介紹詳情區(qū)域的最外層div上添加一個id;
<div class="product" id="productId"></div>
3亿扁、在methods方法中寫入以下代碼；
counter1() { //counter1是綁定的點擊事件名稱
const returnEle = document.querySelector("#productId"); //productId是將要跳轉(zhuǎn)區(qū)域的id
if (!!returnEle) {
returnEle.scrollIntoView(true); // true 是默認的
}
document.querySelector("counter1").scrollIntoView(true); //這里的counter1是將要返回地方的id
}
到這里鸟廓，就實現(xiàn)當前頁跳轉(zhuǎn)的效果了。
a標簽的用法：
1襟己、a標簽上寫上一個id名（即將跳轉(zhuǎn)到的區(qū)域的名稱）
<div><a href="#productid">產(chǎn)品介紹</a></div>
2引谜、在你點擊跳轉(zhuǎn)的產(chǎn)品介紹詳情區(qū)域的最外層div上添加一個id;
<div class="product" id="productId"></div>
以上兩步就實現(xiàn)跳轉(zhuǎn)效果了，但是a標簽的跳轉(zhuǎn)會使url發(fā)生改變擎浴。
