
過去有經驗的前端工程師,會使用 JavaScript 來實現平滑滾動的效果。但現在其實不用這麼麻煩啦!只要用一行 CSS,就能輕鬆搞定。
Step1
當要使用錨點連結時,方法很簡單,只需建立錨點區與錨點連結就可以了。

Step2
當建立完畢後,這時點擊連結,畫面會「瞬間」跳到目標區塊。

Step3
這時回到CSS,只需在html加入scroll-behavior:smooth,這時就可實現平滑式的滾動啦!其效果可參考下方的範例喔!但目前此效果不支援IE喔!

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