1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 透過CSS3滾動行為控制屬性,讓錨點連結平滑滾動,免寫 JavaScript!

透過CSS3滾動行為控制屬性,讓錨點連結平滑滾動,免寫 JavaScript!

2025/04/15

梅問題-透過CSS3滾動行為控制屬性,讓錨點連結平滑滾動,免寫 JavaScript!
  錨點連結雖然有點「老派」,但依然非常實用!透過它,我們可以輕鬆地從一個連結跳到網頁中指定的區塊,非常適合用在文章目錄上,讓讀者能快速瀏覽有興趣的部分,而不用從頭滑到尾。但這個好用的功能,也有個小缺點:當你點擊錨點連結時,頁面會瞬間跳過去,缺乏視覺上的滑順過渡,整體體驗比較生硬。


過去有經驗的前端工程師,會使用 JavaScript 來實現平滑滾動的效果。但現在其實不用這麼麻煩啦!只要用一行 CSS,就能輕鬆搞定。


Step1
當要使用錨點連結時,方法很簡單,只需建立錨點區與錨點連結就可以了。
梅問題-透過CSS3滾動行為控制屬性,讓錨點連結平滑滾動,免寫 JavaScript!
Step2
當建立完畢後,這時點擊連結,畫面會「瞬間」跳到目標區塊。
梅問題-透過CSS3滾動行為控制屬性,讓錨點連結平滑滾動,免寫 JavaScript!
Step3
這時回到CSS,只需在html加入scroll-behavior:smooth,這時就可實現平滑式的滾動啦!其效果可參考下方的範例喔!但目前此效果不支援IE喔!
梅問題-透過CSS3滾動行為控制屬性,讓錨點連結平滑滾動,免寫 JavaScript!
#範例預覽