JS返回顶部实例代码


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了JS返回顶部实例代码,供大家参考,具体内容如下

html/css部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="返回顶部效果.js"></script>
<style>
 .container{
 width:1190px;
 margin: 0px auto;
 }
 .container a{
 display: none;
 width:40px;
 height:40px;
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 position: fixed;
 left:95%;
 bottom: 50px;
 }
 .container a:hover{
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 background-position: left -40px;
 }
</style> 
</head>
<body>
 <div class="container">
 <img src="/535e0ce800015b7511902787.jpg" alt="">
 <a id="btn" href="javascript:" class="btn" title="回到顶部"></a>
 </div>
</body>
</html>

JS部分

window.onload=function(){
 var obtn=document.getElementById("btn");
 var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
 var isTop=true;
 var timer=null;
 window.onscroll=function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 if(topH>clientHeight){
 obtn.style.display="block";
 }else{
 obtn.style.display="none";
 }
 }
 obtn.onclick=function(){
 timer=setInterval(function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 var stepLength=Math.ceil(topH/5);
 document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
 if(topH==0){
 clearInterval(timer);
 }
 },30);
 }
}

学习视频地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 #Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 #Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 #Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 #Javascript
Vue filter介绍及其使用详解
Oct 21 #Javascript
详解node nvm进行node多版本管理
Oct 21 #Javascript
JS实现瀑布流布局
Oct 21 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
人族 Terran 基本策略
2020/03/14 星际争霸
操作Oracle的php类
2006/10/09 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
php给图片加文字水印
2015/07/31 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
javascript操作css属性
2013/12/30 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python自动化测试实例解析
2014/09/28 Python
初步理解Python进程的信号通讯
2015/04/09 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
对Python中plt的画图函数详解
2018/11/07 Python
python3实现逐字输出的方法
2019/01/23 Python
python字符串判断密码强弱
2020/03/18 Python
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
中学家长会邀请函
2014/01/17 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
关爱残疾人标语
2014/06/25 职场文书
赔偿协议书范本
2014/09/12 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年大学生工作总结
2015/04/21 职场文书