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

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

 

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

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

就像這樣：

 

 

 

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

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

 

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

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

話不多說，直接上代碼

<!-- 先定好幾個用於點擊的錨點 -->

<a @click="clickanchor('#item0')"></a>
<a @click="clickanchor('#item1')"></a>
<a @click="clickanchor('#item2')"></a>
<a @click="clickanchor('#item3')"></a>
<a @click="clickanchor('#item4')"></a>
<a @click="clickanchor('#item5')"></a>


<div id="item0"></div>

網上的方法JS爲

clickanchor(idName) {
   document.querySelector(idName).scrollIntoView(true);
}

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

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

 

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

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

 

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

同時這個新屬性還有其他幾個屬性  behavior : " smooth "

 

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

方法爲：

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

 

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

 

完~