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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
jquery 插件学习(四)
Aug 06 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
JS实现商品筛选功能
Aug 19 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
angular 服务随记小结
May 06 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
js实现弹幕飞机效果
Aug 27 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实现大流量下抢购方案
2017/12/15 PHP
js静态作用域的功能。
2006/12/25 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
javascript实现日历效果
2019/06/17 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
pandas多级分组实现排序的方法
2018/04/20 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python 带时区的日期格式化操作
2020/10/23 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
保护环境倡议书500字
2014/05/19 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
清洁工个人工作总结
2015/03/05 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
python实现三次密码验证的示例
2021/04/29 Python