原生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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
this[] 指的是什么内容 讨论
Mar 24 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 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/js获取客户端mac地址的实现代码
2013/07/08 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
如何使用python操作vmware
2019/07/27 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
校园环保广播稿(3篇)
2014/09/15 职场文书
人事主管岗位职责
2015/02/04 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers