最近接了一个非常非常常见的需求,点击回到目录页,由于就是一个很小的单页展示页,就没引 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);
}
});
};
如果本文对你有所帮助,感谢点一颗小心心,您的支持是我继续创作的动力! 最后:写作不易,如要转裁,请标明转载出处。