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最简单的拖拽效果实现代码
Sep 24 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
让图片旋转任意角度及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中空字符串和0之间的关系
2016/10/23 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
python实现基本进制转换的方法
2015/07/11 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python Socket编程详细介绍
2017/03/23 Python
python实现音乐下载器
2018/04/15 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Pycharm小白级简单使用教程
2020/01/08 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
业务主管岗位职责
2013/11/20 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
产品调价通知函
2015/04/20 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
MySQL触发器的使用
2021/05/24 MySQL
Oracle11g R2 安装教程完整版
2021/06/04 Oracle