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工具_Form 封装
Aug 21 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
基于zepto.js实现登录界面
Oct 09 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
python插入数据到列表的方法
2015/04/30 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Python 多线程Threading初学教程
2017/08/22 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python如何生成网页验证码
2018/07/28 Python
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
opencv实现图像平移效果
2021/03/24 Python
幼儿园教育教学反思
2014/01/31 职场文书
村长贪污检举信
2014/04/04 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
初中毕业生感言
2015/07/31 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
写好Python代码的几条重要技巧
2021/05/21 Python