直接奔主題，前端簡單地錨點實現方法大家都會，無非就是在把 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的方法。

　　

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的页面添加锚点后如何点击不改变URL？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。