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本身的局限性 别让javascript做太多事
Mar 23 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
React中的Context应用场景分析
Jun 11 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
一个域名查询的程序
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php实现微信支付之企业付款
2018/05/30 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
angularjs $http调用接口的方式详解
2018/08/13 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
python多线程操作实例
2014/11/21 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
使用python3实现操作串口详解
2019/01/01 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
幼儿教师考核制度
2014/01/25 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
转让协议书
2015/01/27 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
红色经典电影观后感
2015/06/18 职场文书
生活小常识广播稿
2015/08/19 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
HttpClient实现文件上传功能
2022/08/14 Java/Android