頁面平滑滾動：scroll-behavior&scrollIntoView

從前我們在網頁中會需要內容定位，或者返回頂部之類的功能，通常使用錨點來實現，但是頁面跳轉太過生硬，用戶體驗不夠，於是會通過一大串的js來實現平滑滾動的效果，近兩年出現了一些新的屬性可以很方便的完成這種交互，很大程度的減小了開發難度。

一、CSS：scroll-behavior

約莫是去年開始出現的這個屬性，只需要在需要滾動的地方增加一行如下屬性，即可。

scroll-behavior:smooth;

非常方便，不過看了下兼容性，不是很高。

對於一些對兼容性要求不是很高的，可以使用，非常方便。

可以點擊查看簡單的demo

二、JS：scrollIntoView

scrollIntoView()方法是一個IE6瀏覽器也支持的原生JS API，可以讓元素進入視區，通過觸發滾動容器的定位實現。

通常使用只需向方法傳一個參數即可實現。

document.documentElement.scrollIntoView(false);

傳入false表示將頁面滾動條在最下面，true或不傳則相反

如果需要讓頁面平滑滾動到指定位置，則需要增加參數behavior，設置其值爲"smooth"，如下

document.documentElement.scrollIntoView({
    behavior: "smooth",
    block: "end",
    inline: "nearest"
});

其實如果直接傳入的一個boolean值則相當於設置了block的值：

• true => block:“start”
• false => block:“end”

inline可選值爲"start"，“center”，“end"或"nearest”。默認爲"nearest"。

使用scrollIntoView的場景：

• 想頁面增加內容時，讓頁面滾動最下面添加的位置
• 聊天向上顯示最新對話
• 回到頂部

等

本文只是簡單介紹了使用方法，想要詳細瞭解的話，可以參考張鑫旭的這篇文章：CSS scroll-behavior和JS scrollIntoView讓頁面滾動平滑