[CSS] 使用 scroll-behavior 達成免用 js 的平滑滾動效果

常常在做一頁式的頁面時，會做到點了某的按鈕會滑動到指定地方的效果，這個傳統來說是先利用 id 設定錨點，點擊後再根據錨點算出移動的距離後移動過去，現在我們可以用純 CSS 的 scroll-behavior 就幫我們達成這個功能了。

首先我們先設定 id 跟錨點如下：

這時我們點擊其中一個按鈕都會直接跳到該 id 的位置。

接下來只要在 css 加上這段：

html{
  scroll-behavior: smooth;
}

這樣我們點擊後就會平順的滑到相對應的位置去了。

只是目前這個屬性 safari 還不支援，要使用的話就評估看看，可能還是得用傳統的方法來做。