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中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
让图片旋转任意角度及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文件上传原理简单分析
2011/05/29 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
网络技术支持面试题
2013/04/22 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
学校岗位设置方案
2014/01/16 职场文书