頁面添加錨點后如何點擊不改變URL？

　　直接奔主題，前端簡單地錨點實現方法大家都會，無非就是在把 a 標簽的 href 寫成想要跳到的元素的id ，比如點擊 <a href="#box"></a> 頁面就會自動滾動到 <div id="box"></div> 元素的位置。

　　那么這樣使用會產生一個現象，那就是 url 會被改變，瀏覽器默認的行為會將 id 放在 url 后面。比如：http://www.xxx.com#box 

　　有的時候可能不會產生任何問題，直接跳轉過去立馬完成產品的需求，但是當存在多個錨點的時候，我們會突然發現用戶點擊瀏覽器后退按鈕並不會跳轉太之前的頁面，而是放回上一個帶有錨點的鏈接比如：

　　http://www.xxx.com#box2 點擊后退時 變成了 http://www.xxx.com#box1 其實還在原來的頁面只是改變了 hash 值 ？？？？那用戶體驗是極差的，甚至不注意觀察的用戶會以為瀏覽器出了問題，后退按鈕不管用了？？？？

　　現在就記錄一下解決的方法。

　　把a標簽替換掉，或者不加href，我們把要點擊的按鈕綁定一個點擊事件，那么這個點擊事件需要做什么的？看下面的代碼！

//給想要點擊的元素綁定事件並傳入要跳到元素的id
//因為項目使用Vue就直接寫@click
<a @click="changeHash('#box2')"></a>

//使用document.querySelector實現錨點的效果
changeHash(idName) {
    document.querySelector(idName).scrollIntoView(true);
}

　　案例：http://www.kaochong.com/course/detail-2264.html

　　以上就是實現點擊錨點后不改變url的方法。