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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
js实现下拉框二级联动
Dec 04 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php源码的使用方法讲解
2019/09/26 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python 变量的创建过程详解
2019/09/02 Python
详解Python模块化编程与装饰器
2021/01/16 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
财务部绩效考核方案
2014/05/04 职场文书
故意杀人案辩护词
2015/05/21 职场文书
追讨欠款律师函
2015/06/24 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Nebula Graph解决风控业务实践
2022/03/31 MySQL
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
docker 制作mysql镜像并自动安装
2022/05/20 Servers