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


Posted in Javascript onJanuary 18, 2017

运行原理

通过定时器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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 #Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
js实现消息滚动效果
Jan 18 #Javascript
You might like
PHP取进制余数函数代码
2012/01/19 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
学习python (2)
2006/10/31 Python
python中pygame模块用法实例
2014/10/09 Python
Python编写Windows Service服务程序
2018/01/04 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python实现FM算法解析
2019/06/18 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python 回溯法模板详解
2020/02/26 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
上学迟到的检讨书
2014/01/11 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
合作协议书怎么写
2014/04/18 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
甲午风云观后感
2015/06/02 职场文书
单独二胎证明
2015/06/24 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
httpclient调用远程接口的方法
2022/08/14 Java/Android