前言
在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要的效果是要有點緩沖效果。
現代瀏覽器陸續意識到了這種需求，scrollIntoView意思是滾動到可視，css中提供了scroll-behavior屬性，js有Element.scrollIntoView()方法。
scroll-behavior
scroll-behavior屬性可取值auto|smooth|inherit|unset
scroll-behavior: smooth;是我們想要的緩沖效果。在PC瀏覽器中，頁面默認滾動是在<html>標簽上，移動端大多數在<body>標簽上，在我們想要實現平滑“回到頂部”，只需在這兩個標簽上都加上：
html, body { scroll-behavior: smooth; }
准確的說，寫在容器元素上，可以讓容器（非鼠標手勢觸發）的滾動變得平滑，而不局限於<html>，<body>標簽。
利用這個css屬性可以一步將原來純css標簽直接切換，變成平滑過渡切換效果。
.tab label { padding: 10px; border: 1px solid #ccc; margin-right: -1px; text-align: center; float: left; overflow: hidden; } .tab::after { content: ""; display: table; clear: both; } .box { height: 200px; border: 1px solid #ccc; scroll-behavior: smooth; overflow: hidden; margin-top: 10px; } .item { height: 100%; position: relative; overflow: hidden; } .item input { position: absolute; top: 0; height: 100%; width: 1px; border: 0; padding: 0; margin: 0; clip: rect(0 0 0 0); } <h1>純CSS選項卡</h1> <div class="tab"> <label for="tab1">選項卡1</label> <label for="tab2">選項卡2</label> <label for="tab3">選項卡3</label> </div> <div class="box"> <div class="item"> <input type="text" id="tab1"> <p>選項卡1內容</p> </div> <div class="item"> <input type="text" id="tab2"> <p>選項卡2內容</p> </div> <div class="item"> <input type="text" id="tab3"> <p>選項卡3內容</p> </div> </div>
支持度不是很好
Element.scrollIntoView()
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。
element.scrollIntoView(); // 等同於element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型參數 element.scrollIntoView(scrollIntoViewOptions); // Object型參數
參數alignToTop
一個Boolean值：
-
如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。
-
如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
參數scrollIntoViewOptions
一個帶有選項的 object：
{ behavior: "auto" | "instant" | "smooth", block: "start" | "end", }
-
behavior 可選
定義緩動動畫， "auto", "instant", 或 "smooth" 之一。默認為 "auto"。 -
block 可選
"start", "center", "end", 或 "nearest"之一。默認為 "center"。 -
inline 可選
"start", "center", "end", 或 "nearest"之一。默認為 "nearest"。
向下兼容
要達到所有瀏覽器都有相同（類似）效果，那就要把剩余不支持scroll-behavior屬性的瀏覽器揪出來，用js去完成使命了。
判斷是否支持scroll-behavior屬性
很簡單，用以下這一行代碼
if(typeof window.getComputedStyle(document.body).scrollBehavior === 'undefined') { // 兼容js代碼 } else { // 原生滾動api // Element.scrollIntoView() }
判斷是否支持scroll-behavior屬性，直接利用原生Element.scrollIntoView()滾動，否則向下兼容處理。
緩沖算法
緩沖的直觀效果是越來越慢，直到停止，也就是在相同時間內運動的距離越來越短。這樣可以設置一個定時器，移動到當前點到目標點距離的緩沖率（比如1/2，1/3，...）處，比如，緩沖率設為2，當前距離目標點64px，下一秒就是32px，然后16px，8px...，到達某個閾值結束，也就是：
var position = position + (destination - position) / n;
下面來簡單實現一個點擊右下方的”回到頂部“按鈕，頁面緩動滾動到頂部的demo。
<div class="content"> <p>很多內容。。。</p> ... </div> <section class="back-to-top"> 回到頂部 </section> .content { height: 3000px; border: 1px solid #ccc; box-shadow: 0 0 2px solid; } .back-to-top { width: 18px; padding: 10px; border: 1px solid #ccc; box-shadow: 0 0 2px #333; position: fixed; right: 20px; bottom: 40px; } .back-to-top:hover { cursor: pointer; } <script type="javascript"> var scrollTopSmooth = function (position) { // 不存在原生`requestAnimationFrame`，用`setTimeout`模擬替代 if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (cb) { return setTimeout(cb, 17); }; } // 當前滾動高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // step var step = function () { var distance = position - scrollTop; scrollTop = scrollTop + distance / 5; if (Math.abs(distance) < 1) { window.scrollTo(0, position); } else { window.scrollTo(0, scrollTop); requestAnimationFrame(step); } }; step(); } $backToTop = document.querySelector('.back-to-top') $backToTop.addEventListener('click', function () { scrollTopSmooth(0); }, false); </script>
簡單封裝
上面緩沖算法和當前滾動業務代碼耦合在一起了，下面單獨拆解出單獨一個函數。
/** * 緩沖函數 * @param {Number} position 當前滾動位置 * @param {Number} destination 目標位置 * @param {Number} rate 緩動率 * @param {Function} callback 緩動結束回調函數 兩個參數分別是當前位置和是否結束 */ var easeout = function (position, destination, rate, callback) { if (position === destination || typeof destination !== 'number') { return false; } destination = destination || 0; rate = rate || 2; // 不存在原生`requestAnimationFrame`，用`setTimeout`模擬替代 if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (fn) { return setTimeout(fn, 17); } } var step = function () { position = position + (destination - position) / rate; if (Math.abs(destination - position) < 1) { callback(destination, true); return; } callback(position, false); requestAnimationFrame(step); }; step(); }
拆分后，這個小緩沖算法就可以被重復調用啦，而且，適用於滾動到指定位置（不僅僅是到頂部）和緩沖率（控制滾動快慢），當前小demo調用：
var scrollTopSmooth = function (position) { // 當前滾動高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; easeout(scrollTop, position, 5, function (val) { window.scrollTo(0, val); }); } $backToTop = document.querySelector('.back-to-top') $backToTop.addEventListener('click', function () { scrollTopSmooth(200); }, false);
總結
綜合來看，簡單實現一個完美滾動注意以下即可
-
<html>，<body>標簽加上scroll-behavior: smooth;屬性；
-
判斷當前瀏覽器是否支持scrollBehavior屬性；
-
如果支持直接用原生滾動apiElement.scrollIntoView()；
-
如果不支持則用js小緩沖算法兼容處理。