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 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
让图片旋转任意角度及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
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
js实现抽奖功能
2020/11/24 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python requests爬取高德地图数据的实例
2018/11/10 Python
pycharm显示远程图片的实现
2019/11/04 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
庆七一活动方案
2014/01/25 职场文书
网络编辑职责
2014/03/01 职场文书
演讲稿的写法
2014/05/19 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
五好家庭申报材料
2014/12/20 职场文书
贫困证明怎么写
2015/06/16 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书