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_06_理解对象的创建过程
Oct 15 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
php中给js数组赋值方法
Mar 10 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 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
JAVA/JSP学习系列之六
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python文件处理
2016/02/29 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
应届毕业生个人自我评价
2013/09/20 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
端午节活动策划方案
2014/03/09 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
年检委托书
2014/08/30 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android