CSS讓頁面平滑滾動
阿新 • • 發佈：2018-11-20
我們以往實現平滑滾動往往用的是jQuery, 如實現平滑回到頂部，就寫如下程式碼：
$('.js_go_to_top').click(function () {
$(".js_scroll_area").animate({scrollTop: 0}, 600);
});
我們現在可能通過css實現這一功能了，只需要新增一句樣式即可：
scroll-behavior:smooth
相容情況可以點選這裡檢視。
scroll-behavior的使用你就記住這麼一句話——
凡是需要滾動的地方都加一句scroll-behavior:smooth就好了！
你別管他用不用得到，也不用管瀏覽器相容性如何，你都加上。這就像一個不要錢的免費抽獎，沒有中獎，沒關係，又沒什麼損失，中獎了自然好，錦上添花！scroll-behavior:smooth就是這種尿性。
舉個例子，在PC瀏覽器中，網頁預設滾動是在<html>標籤上的，移動端大多數在<body>標籤上，業界瀏覽器的CSS reset都可以加上這麼一條規則：
html, body { scroll-behavior:smooth; }
參考文章：