js控制的回到页面顶端goTop的代码实现


Posted in Javascript onMarch 20, 2013

有没有见过很多在页面的右下角有个【回到顶端】的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子。
像:
js控制的回到页面顶端goTop的代码实现
控制的js代码如下:

function goTop(){ 
var _btn = document.getElementById("goTop"); 
if (document.documentElement && document.documentElement.scrollTop) { 
var _con = document.documentElement; 
} else if (document.body) { 
var _con = document.body; 
} 
window.onscroll = set; 
_btn.style.left = document.documentElement.scrollWidth/2 + 500 + "px"; 
_btn.onclick = function (){ 
_btn.style.display = "none"; 
window.onscroll = null; 
this.timer = setInterval(function() { 
_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3); 
if (_con.scrollTop == 0) clearInterval(_btn.timer, window.onscroll = set); 
},10); 
}; 
function set() { 
_btn.style.display = _con.scrollTop ? 'block': "none"; 
} 
}; 
document.write("<div id=\"goTop\" style=\"font-size:12px; width:20px; height:55px; background:#0950A2; color:#fff; line-height:14px; position:fixed; bottom:30px; display:none; cursor:pointer; text-align:center; padding:5px 0; z-index:1; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode == \'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 30 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 30);\">返<br />回<br />顶<br />部</div>"); 
window.onscroll = goTop;
Javascript 相关文章推荐
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
js实现汉字排序的方法
Jul 23 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 #Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 #Javascript
javascript中[]和{}对象使用介绍
Mar 20 #Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 #Javascript
javascript中注册和移除事件的4种方式
Mar 20 #Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 #Javascript
jQuery实现id模糊查询的小例子
Mar 19 #Javascript
You might like
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python3.6的venv模块使用详解
2018/08/01 Python
linux安装python修改默认python版本方法
2019/03/31 Python
详解Python:面向对象编程
2019/04/10 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python常用断言函数实例汇总
2020/11/30 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
大学老师推荐信
2014/02/25 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
生日宴会策划方案
2014/06/03 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
放假通知范文
2015/04/14 职场文书
食品安全责任书范本
2015/05/09 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP