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 控制CSS样式表
Aug 20 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
vue增删改查的简单操作
Jul 15 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JS实现页面侧边栏效果探究
Jan 08 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
php时间戳转换的示例
2014/03/31 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
在微信小程序中使用vant的方法
2019/06/07 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
家长写给老师的建议书
2014/03/13 职场文书
中班开学寄语
2014/04/04 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL