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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js播放wav文件(源码)
Apr 22 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
JS中Array数组学习总结
Jan 18 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
php操作MongoDB类实例
2015/06/17 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
详解Python发送邮件实例
2016/01/10 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python对切片命名的实现方法
2018/10/16 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
在求职信中如何凸显个人优势
2013/10/30 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
三严三实学习心得体会
2014/10/13 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
2019广播稿怎么写
2019/04/17 职场文书