原生js 返回顶部 返回到指定位置

738 阅读1分钟

最近接了一个非常非常常见的需求,点击回到目录页,由于就是一个很小的单页展示页,就没引 jquery、vue 这些框架,直接是一个html页。

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

我的页面是这样的,上面有一堆说明文字(类似前言),接着是目录,点击目录跳到具体的详情部分(用锚点做的),然后点击返回目录回到目录页。如果继续用锚点做返回目录页也ok,但效果肯定没有缓慢滑回来好呀,所以搞了一下原生js返回顶部的写法~

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

//当网页向下滑动 距离目录20px 出现"返回目录" 按钮
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,FireFox
  cancelAnimationFrame(timer);
  timer = requestAnimationFrame(function fn(){
    var oTop = document.body.scrollTop || document.documentElement.scrollTop;
    if(oTop > menuTop){ // 如果返回顶部 可以写 oTop > 0
      scrollTo(0, oTop-50); // 如果要调速度 可以更改-50
      timer = requestAnimationFrame(fn);
    }else{
      cancelAnimationFrame(timer);
    } 
  });
};

如果本文对你有所帮助,感谢点一颗小心心,您的支持是我继续创作的动力! 最后:写作不易,如要转裁,请标明转载出处。