原生js实现返回顶部缓冲效果_网络技术_宿州市腾雀网络科技有限公司

原生js实现返回顶部缓冲效果

发布时间 - 2026-01-10 22:37:40 点击率：次

运行原理

通过定时器30毫秒执行一次滚动条上升，每次上升的高度为当前高度的80%，这样就达到了上升缓冲的动画效果。

判断当滚动条高度超过一屏时，按钮显示，默认隐藏

知识要点

scrollTop//获取滚动条高度 需要写兼容
clientHeight//可视窗口高度 需要写兼容
setInterval//定时器
window.onscroll//滚动触发事件

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
.bg{background:#9B1BC5; width: 1000px; height: 3000px; margin: 0 auto;}
#gotop{width: 50px; height: 50px; background:#5490F5; color: #fff; position: fixed; left: 50%; bottom: 30px; text-align: center; font-family: "Microsoft Yahei",tahoma,arial; font-size: 14px; cursor: pointer; margin-left: 520px; display: none;}
#gotop span{display: block;padding: 5px;}
</style>
</head>
<body>
<div class="bg"></div>
<div id="gotop"><span>返回顶部</span></div>
<script type="text/javascript">
 //在页面加载完后立即执行多个函数方案
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 //在页面加载完后立即执行多个函数方案结束
 addloadEvent(b);
 function b(){
  var gotop=document.getElementById("gotop");  
  var timer;
  var tf=true;
  //滚动触发
  window.onscroll=function(){
   //获取滚动条高度
   var ostop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
   //获取窗口可视区域高度
   //console.log(ostop)
   var ch=document.documentElement.clientHeight||document.body.clientHeight;
   //如果页面超过一屏高度按钮显示，否则隐藏
   if(ostop>=ch){
    gotop.style.display="block";
   }else{
    gotop.style.display="none";
   }
   //
   if(!tf){
    clearInterval(timer);    
   }
    tf=false;
  }
  //点击触发
  gotop.onclick=function(){
   //创建定时器
   timer=setInterval(function(){
    //获取滚动条高度
    var ostop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    //每次上升高度的20%
    var speed=Math.ceil(ostop/5);
    //每次上升当前高度的80%
document.documentElement.scrollTop=document.body.scrollTop=ostop-speed;
    //如果高度为0，清除定时器
    if(ostop==0){
     clearInterval(timer);
    } 
    tf=true;
   },30);   
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# 原生js返回顶部 # js实现返回顶部 # 返回顶部 # 一个简单的弹性返回顶部JS代码实现介绍 # js+JQuery返回顶部功能如何实现 # javascript返回顶部效果(自写代码) # js简单的点击返回顶部效果实现方法 # JS返回顶部实例代码 # javascript简单实现跟随滚动条漂浮的返回顶部按钮效果 # javascript实现博客园页面右下角返回顶部按钮 # js实现返回顶部效果 # jQuery实现返回顶部功能适合不支持js的浏览器 # js实现带有动画的返回顶部 # 滚动条 # 多个 # 完后 # 加载 # 就达 # fieldset # form # li # legend # input # button # textarea # hr # blockquote # ul # ol # dd # dl # dt # kbd

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：万网主机建站：如何选择最适合自己网站需求的主机类型？

下一篇：如何通过Webman框架实现即时搜索和自动补全功能？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：万网主机建站：如何选择最适合自己网站需求的主机类型？

下一篇：如何通过Webman框架实现即时搜索和自动补全功能？