只要一行 CSS 實現錨點連結跳轉效果 scroll-behavior 屬性

網頁內部的錨點跳轉效果很常見,通常在返回頁首及文章內的跳轉,效果 Y 軸呈現慢慢滾動過去的感覺,這種效果大多人可能使用 JavaScript 達成,但是 CSS 也是可以做到,而且更快更方便,只要加入下面一行 CSS 就可以。

body {
    scroll-behavior: smooth;
}

只要使用 scroll-behavior 屬性就可以達成

scroll-behavior 屬性主要有兩個參數,auto 及 smooth,auto 為預設值,其效果會直接滾動到目標,smooth 則可以緩慢的滾動到目標。

Leave a comment