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 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
JavaScript中this详解
Sep 01 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
vue.js表格分页示例
Oct 18 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
jquery实现拖拽添加元素功能
2020/12/01 jQuery
vue中watch的用法汇总
2020/12/28 Vue.js
原生JavaScript实现留言板
2021/01/10 Javascript
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python几种常见算法汇总
2020/06/02 Python
银行求职信个人范文
2013/12/16 职场文书
安全事故检讨书
2014/01/18 职场文书
职称评定自我鉴定
2014/03/18 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
小学运动会入场词
2015/07/18 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript