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 miscellanea -display data real time, using window.status
Jan 09 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
vue中的scope使用详解
Oct 29 Javascript
Node.js API详解之 readline模块用法详解
May 22 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
PHP入门之常量简介和系统常量
2014/05/12 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
2014年工作总结与下年工作计划
2014/11/27 职场文书
西岭雪山导游词
2015/02/06 职场文书
提档介绍信范文
2015/10/22 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android