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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
p5.js临摹旋转爱心
Oct 23 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默认安装产生系统漏洞
2006/10/09 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
自己的js工具 Event封装
2009/08/21 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
Python open读写文件实现脚本
2008/09/06 Python
Python OS模块常用函数说明
2015/05/23 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
社区端午节活动方案
2014/01/28 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
大学生应聘求职信
2014/05/26 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
法定代表人资格证明书
2015/06/18 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL