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的10个怪癖和秘密分享
Aug 28 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
vue下载excel的实现代码后台用post方法
May 10 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
截获网站title标签之家内容的例子
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
对pandas中apply函数的用法详解
2018/04/10 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
演讲稿祖国在我心中
2014/05/04 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
职称评定个人总结
2015/03/05 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL