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捕获超链接事件进行局部刷新代码
May 10 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
Vue中props的使用详解
Jun 15 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
JS实现的自定义map方法示例
May 17 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
Vue的自定义组件不能使用click方法的解决
Jul 28 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连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
jsonp原理及使用
2013/10/28 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
js命名空间写法示例
2015/12/18 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
Python字符串逆序输出的实例讲解
2019/02/16 Python
详解Python循环作用域与闭包
2019/03/21 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
初任培训自我鉴定
2013/10/07 职场文书
大家检讨书5000字
2014/02/03 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
语文教育专业求职信
2014/06/28 职场文书
倡议书格式及范文
2015/04/29 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技