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 1.42 checkbox 全选和反选代码
Mar 27 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
js实现星星海特效的示例
Sep 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通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
php实现通过ftp上传文件
2015/06/19 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python基础教程之缩进介绍
2014/08/29 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python开启debug模式的方法
2019/06/27 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
python中append函数用法讲解
2020/12/11 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
梅花魂教学反思
2014/04/25 职场文书
妇联主席先进事迹
2014/05/18 职场文书
公关活动策划方案
2014/05/25 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
百万英镑观后感
2015/06/09 职场文书
婚宴新郎致辞
2015/07/28 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS