使用錨點定位不改變url同時平滑的滑動到錨點位置，不會生硬的直接到錨點位置

對前端來說錨點是一個很好用的技術，它能快速定位到預先埋好的位置。

但是美中不足的是它會改變請求地址url，當用戶使用了錨點的時候錨點的名稱會被添加到url的最后面。

就像這樣：

此時如果用戶刷新頁面便會報錯或者顯示不出來刷新前的頁面，

同時點擊錨點時是非常生硬的直接跳轉到錨點位置，沒有任何過渡效果

我今天做項目的時候也算是鉆研出來了！！！

使用錨點時不會改變url請求地址，同時還很平滑的滑動到錨點的位置

話不多說，直接上代碼

網上的方法JS為

clickanchor(idName) {

document.querySelector(idName).scrollIntoView(true);

}

querySelector用于選擇元素，具體可看文檔? HTML DOM?querySelector()?方法

element.scrollIntoView()方法讓當前的元素滾動到瀏覽器窗口的可視區域內

這樣的確是可以使用錨點定位而且也不會改變url，

但是還是沒有過渡效果，非常的生硬

介紹CSS的新屬性? ?behavior: "smooth"用于平滑滾動

當在JS里面使用了這個元素時，便可以非常平滑的過渡到錨點位置

方法為：

clickanchor(idName) {

document.querySelector(idName).scrollIntoView({ behavior:"smooth"});

}

這樣使用錨點真的太舒服了，是不是對錨點的喜歡又更上一層樓了【奸笑】

完~

原文：https://www.cnblogs.com/mlw1814011067/p/13039136.html

總結

以上是生活随笔為你收集整理的html5锚点平滑,使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置...的全部內容，希望文章能夠幫你解決所遇到的問題。

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