在網頁裡面如果你有在某個標籤設定 id 例如 id="contact",在超連結的時候設定 href="#contact" 就可以直接到那個 id 的位置,這時再加上 CSS scroll-behavior 的設定就能做到平滑捲動。
只是如果遇到頁面上方有類似固定位置的主選單把畫面遮住,滑到對應的 id 就會有一部分被遮住,這時可能就得自己寫 js 去捲動到對應的位置了。
首先還是利用 js 去抓網址上的 hash 的值:
let hash=window.location.hash;
接著透過這個值轉換成 jQuery 的選擇器,再透過 offset().top 去取得對應的網頁位置:
let faqPos=$(hash).offset().top;
之後就可以利用 animate 的方法讓頁面滑過去了。
$("html").animate({ scrollTop: faqPos }, 700);