完美實現一個「回到頂部」

時間 2019-11-05

原文原文鏈接

前言

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

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

scroll-behavior

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

scroll-behavior: smooth;是咱們想要的緩衝效果。在PC瀏覽器中，頁面默認滾動是在<html>標籤上，移動端大多數在<body>標籤上，在咱們想要實現平滑「回到頂部」，只需在這兩個標籤上都加上：github

html, body {
  scroll-behavior: smooth;
}

準確的說，寫在容器元素上，可讓容器（非鼠標手勢觸發）的滾動變得平滑，而不侷限於<html>，<body>標籤。算法

利用這個css屬性能夠一步將原來純css標籤直接切換，變成平滑過渡切換效果。api

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

實現效果瀏覽器

也能夠戳這裏函數

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

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

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"。

瀏覽器支持

能夠看到對於無參數的狀況支持仍是很好的，有參數的該API在瀏覽器中支持不是很好，咱們能夠同時結合CSS設置scroll-behavior: smooth;滾動效果，在執行滾動使用target.scrollIntoView()，便可達到「完美滾動」（不太完美）效果。

向下兼容

要達到全部瀏覽器都有相同（相似）效果，那就要把剩餘不支持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;
}

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>

效果圖

或者戳這裏

簡單封裝

上面的小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);