頁面平滑滾動的體驗提升
阿新 • • 發佈：2018-11-29
scroll-behavior屬性和JS scrollIntoView()方法
本身作為體驗提升的手段，用
<a href="#" rel="internal">返回頂部</a>
相容性就可以不用考慮太多
不支援就直接回去唄
用法：
scroll-behavior:smooth寫在滾動容器元素上，可以讓容器（非滑鼠手勢觸發）的滾動變得平滑。
demo:https://www.zhangxinxu.com/study/201810/css-scroll-behavior.php
其實scroll-behavior的使用沒有那麼多花頭，你就記住這麼一句話——
凡是需要滾動的地方都加一句scroll-behavior:smooth就好了！
你別管他用不用得到，也不用管瀏覽器相容性如何，你都加上。這就像一個不要錢的免費抽獎，沒有中獎，沒關係，又沒什麼損失，中獎了自然好，錦上添花！scroll-behavior:smooth就是這種尿性。
舉個例子，在PC瀏覽器中，網頁預設滾動是在<html>標籤上的，移動端大多數在<body>標籤上，於是，我加上這麼一句：
html, body { scroll-behavior:smooth; }
scrollIntoView()方法
DOM元素的scrollIntoView()
隨著Chrome和Firefox瀏覽器開始支援CSS scroll-behavior屬性，順便對，scrollIntoView()方法進行了升級，使支援更多引數，其中一個引數就是可以使滾動平滑。
語法如下：
target.scrollIntoView({
behavior: "smooth"
});