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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
毕业生自荐信的主要内容
2013/10/29 职场文书
社区端午节活动方案
2014/01/28 职场文书
食品安全检查制度
2014/02/03 职场文书
初中生自我鉴定
2014/02/04 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
民间个人借款协议书
2014/09/30 职场文书
安全先进个人材料
2014/12/29 职场文书
孔庙导游词
2015/02/04 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
创业计划书之家教托管
2019/09/25 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
Tomcat配置访问日志和线程数
2022/05/06 Servers