純CSS的scroll-behavior錨點滑順捲動效果

HTML的錨點(anchor link)，只要在標籤中加入屬性id=a，再用連結href=#a
即可用連結的方式跳到頁面上的指定位置

但這效果是畫面直接閃到位置，若要平滑捲動，則需要額外使用jquery或其他javascript的方式達成

如今有個CSS語法亦可達成此效果，不過需新版的firefox或chrome才支援

見支援範圍表，目前除ios safari及opera外，幾乎都支援了
https://caniuse.com/#search=scroll-behavior

如果可以簡單達成，可以不外掛繁重的js語法
只要加一行簡單的css語法，就能讓大部份瀏覽器有平滑效果，何樂而不為

 

直接加到body裡吧

body {
scroll-behavior: smooth;
}

 

打完收工