摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。

在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要的效果是要有點緩沖效果。

現代瀏覽器陸續意識到了這種需求，scrollIntoView意思是滾動到可視，css中提供了scroll-behavior屬性，js有Element.scrollIntoView()方法。

scroll-behavior屬性可取值auto|smooth|inherit|unset

scroll-behavior: smooth;是我們想要的緩沖效果。在PC瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑“回到頂部”，只需在這兩個標簽上都加上：

html, body {
  scroll-behavior: smooth;
}

準確的說，寫在容器元素上，可以讓容器（非鼠標手勢觸發）的滾動變得平滑，而不局限于，標簽。

利用這個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);
}

純CSS選項卡

  選項卡1
  選項卡2
  選項卡3


  

    
    
選項卡1內容
  
  

    
    
選項卡2內容
  
  

    
    
選項卡3內容
  

實現效果

也可以戳這里

再來看一下這個css屬性scroll-behavior在各大瀏覽器中的支持情況

呃~支持度不是很好，這樣一行css代碼能應用上當然是最好的，不行就退化成一閃而過的效果咯。下面再看下js提供的api。

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數
element.scrollIntoView(scrollIntoViewOptions); // Object型參數

一個Boolean值：

如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。

如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

一個帶有選項的 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"。

瀏覽器支持

可以看到對于無參數的情況支持還是很好的，有參數的該API在瀏覽器中支持不是很好，我們可以同時結合CSS設置scroll-behavior: smooth;滾動效果，在執行滾動使用target.scrollIntoView()，即可達到“完美滾動”（不太完美）效果。

要達到所有瀏覽器都有相同（類似）效果，那就要把剩余不支持scroll-behavior屬性的瀏覽器揪出來，用js去完成使命了。

很簡單，用以下這一行代碼

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。

    
很多內容。。。
    ...
  
  

    回到頂部
  

.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;
}

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);

效果圖

或者戳這里

上面的小demo中，緩沖算法和當前滾動業務代碼耦合在一起了，下面多帶帶拆解出多帶帶一個函數。

/**
* 緩沖函數
* @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);

綜合來看，簡單實現一個完美滾動注意以下即可

，標簽加上scroll-behavior: smooth;屬性；

判斷當前瀏覽器是否支持scrollBehavior屬性；

如果支持直接用原生滾動apiElement.scrollIntoView()；

如果不支持則用js小緩沖算法兼容處理。

完~