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

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

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

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

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

html, body {
  scroll-behavior: smooth;
}

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

利用這個css屬性可以一步將原來純css標(biāo)簽直接切換，變成平滑過渡切換效果。

.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內(nèi)容
  
  

    
    
選項卡2內(nèi)容
  
  

    
    
選項卡3內(nèi)容
  

實現(xiàn)效果

也可以戳這里

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

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

Element.scrollIntoView() 方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。

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

一個Boolean值：

如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數(shù)的默認(rèn)值。

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

一個帶有選項的 object：

{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "end",
}

behavior 可選
定義緩動動畫， "auto", "instant", 或 "smooth" 之一。默認(rèn)為 "auto"。

block 可選
"start", "center", "end", 或 "nearest"之一。默認(rèn)為 "center"。

inline 可選
"start", "center", "end", 或 "nearest"之一。默認(rèn)為 "nearest"。

瀏覽器支持

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

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

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

if(typeof window.getComputedStyle(document.body).scrollBehavior === "undefined") {
  // 兼容js代碼
} else {
  // 原生滾動api
  // Element.scrollIntoView()
}

判斷是否支持scroll-behavior屬性，直接利用原生Element.scrollIntoView()滾動，否則向下兼容處理。

緩沖的直觀效果是越來越慢，直到停止，也就是在相同時間內(nèi)運動的距離越來越短。這樣可以設(shè)置一個定時器，移動到當(dāng)前點到目標(biāo)點距離的緩沖率（比如1/2，1/3，...）處，比如，緩沖率設(shè)為2，當(dāng)前距離目標(biāo)點64px，下一秒就是32px，然后16px，8px...，到達(dá)某個閾值結(jié)束，也就是：

var position = position + (destination - position) / n;

下面來簡單實現(xiàn)一個點擊右下方的”回到頂部“按鈕，頁面緩動滾動到頂部的demo。

    
很多內(nèi)容。。。
    ...
  
  

    回到頂部
  

.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);
    };
  }
  // 當(dāng)前滾動高度
  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中，緩沖算法和當(dāng)前滾動業(yè)務(wù)代碼耦合在一起了，下面多帶帶拆解出多帶帶一個函數(shù)。

/**
* 緩沖函數(shù)
* @param {Number} position 當(dāng)前滾動位置
* @param {Number} destination 目標(biāo)位置
* @param {Number} rate 緩動率
* @param {Function} callback 緩動結(jié)束回調(diào)函數(shù) 兩個參數(shù)分別是當(dāng)前位置和是否結(jié)束
*/
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();
}

拆分后，這個小緩沖算法就可以被重復(fù)調(diào)用啦，而且，適用于滾動到指定位置（不僅僅是到頂部）和緩沖率（控制滾動快慢），當(dāng)前小demo調(diào)用：

var scrollTopSmooth = function (position) {
  // 當(dāng)前滾動高度
  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);

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

，標(biāo)簽加上scroll-behavior: smooth;屬性；

判斷當(dāng)前瀏覽器是否支持scrollBehavior屬性；

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

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

完~