最近接了一個(gè)非常非常常見的需求，點(diǎn)擊回到目錄頁，由于就是一個(gè)很小的單頁展示頁，就沒引 jquery、vue 這些框架，直接是一個(gè)html頁。

<div id="menu">目錄</div>

我的頁面是這樣的，上面有一堆說明文字(類似前言)，接著是目錄，點(diǎn)擊目錄跳到具體的詳情部分(用錨點(diǎn)做的)，然后點(diǎn)擊返回目錄回到目錄頁。如果繼續(xù)用錨點(diǎn)做返回目錄頁也ok，但效果肯定沒有緩慢滑回來好呀，所以搞了一下原生js返回頂部的寫法~

var menuTop = document.getElementById('menu').offsetTop; // 目錄距頂部的高度

//當(dāng)網(wǎng)頁向下滑動(dòng) 距離目錄20px 出現(xiàn)"返回目錄" 按鈕
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > menuTop-20 || document.documentElement.scrollTop > menuTop-20) {
    document.getElementById("returnBtn").style.display = "block";
  } else {
    document.getElementById("returnBtn").style.display = "none";
  }
}

var timer = null;
function smoothscroll(){
  // document.documentElement.scrollTop //IE瀏覽器
  // window.pageYOffset //Safari瀏覽器
  // document.body.scrollTop //opera，F(xiàn)ireFox
  cancelAnimationFrame(timer);
  timer = requestAnimationFrame(function fn(){
    var oTop = document.body.scrollTop || document.documentElement.scrollTop;
    if(oTop > menuTop){ // 如果返回頂部 可以寫 oTop > 0
      scrollTo(0, oTop-50); // 如果要調(diào)速度 可以更改-50
      timer = requestAnimationFrame(fn);
    }else{
      cancelAnimationFrame(timer);
    } 
  });
};

如果本文對你有所幫助，感謝點(diǎn)一顆小心心，您的支持是我繼續(xù)創(chuàng)作的動(dòng)力！
最后：寫作不易，如要轉(zhuǎn)裁，請標(biāo)明轉(zhuǎn)載出處。