CSS 視窗捲動效果

CSS 視窗捲動效果

在做網頁的時,我們為了要讓某些連結點了之後移動到適當的位置,我們會透過 HTML anchor link 定義此連結,達到上述的功能。

不過這個功能的體驗,感覺就是閃一下,就跳到要顯示的位置上,感覺並不怎麼好,所以這時候就可以使用 CSS 屬性 scroll-behavior 來達到平滑移動的效果啦。

/* scroll-behavior */
html {
    scroll-behavior: smooth
}

注意:此 scroll-behavior 屬性,目前並不支援 Safari 及 IE 瀏覽器,所以如果想要支援所有瀏覽器的朋友們,可能需要換另一種實作方法了。

參考資料:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

comments powered by Disqus