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

標籤: CSS

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

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

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

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

html{
  scroll-behavior: smooth;
}

 

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

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