JS采用绝对定位实现回到顶部效果完整实例
更新时间：2016年06月20日 12:03:02 作者：cherry
这篇文章主要介绍了JS采用绝对定位实现回到顶部效果,以完整实例形式分析了JS定位到页面顶部功能的实现方法,涉及javascript动态操作页面元素与属性的相关技巧,需要的朋友可以参考下
本文实例讲述了JS采用绝对定位实现回到顶部效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位回到顶部按钮</title>
<style type="text/css">
body{margin:0px;padding:0px;height:2500px;background:#6f0024;}
#div1{width:120px;height:34px;right:4px;bottom:5px;cursor:pointer;background:url(images/ToTop.png) no-repeat;position:fixed;_position:absolute;display:none;}
</style>
<script type="text/javascript">
//绝对定位隐藏显示
function getScroll(id){
var obj = document.getElementById(id);
var timer = null;
positionFixed(obj);
if(obj){
obj.style.display = 'none';
window.onscroll=function(){
getScrollTop() > 0 ? obj.style.display = "block" : obj.style.display = "none";
}
obj.onclick=function(){
var timer = setInterval(sMove,10);
function sMove(){
setScrollTop(getScrollTop() / 1.5);
if(getScrollTop() < 1)clearInterval(timer);
}
}
}
}
//判断IE6
function positionFixed(obj){
var iE6 = !-[1,] && !window.XMLHttpRequest;
if(obj){
var top = obj.offsetTop;
if(iE6){
document.documentElement.style.textOverflow = "ellipsis";
obj.style.position = "absolute";
obj.style.setExpression("top", "eval(documentElement.scrollTop + " + top + ') + "px"');
}
}
}
//获取滚动条Top
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
//回到顶部
function setScrollTop(value){
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onload = function(){
getScroll('div1');
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
javascript表格控件：Chgrid，简化型...2007-04-04
狼人杀是一款多人参与的，通过语言描述推动、较量口才和分析判断能力的策略类桌面游戏。本文将利用小程序实现这一游戏，需要的可以参考一下2022-03-03
这篇文章主要给大家介绍了关于js手写贪吃蛇游戏的相关资料,贪吃蛇游戏是一款经典的游戏,在很多平台上都有出现,文中给出了详细源代码,需要的朋友可以参考下2023-09-09
本篇文章主要是对js确认删除对话框效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要为大家详细介绍了JavaScript对象类型，分析了JavaScript六种数据类型，感兴趣的小伙伴们可以参考一下2016-06-06
直方图在我们平常的时候经常见到，那么这篇文章给大家介绍了下如何使用D3.js实现直方图，文中通过实例介绍的很详细，有需要的朋友们可以参考借鉴。2016-09-09
本文主要介绍了原生JS实现《别踩白块》游戏（兼容IE）的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
表单与操作页面分离，按钮按下，click 或者onclick事件触发，传递一个唯一性的参数至子页面JSP，感兴趣的朋友可以了解下2013-09-09
关于iframe之间的通信问题与自适应高度问题网上有很多，那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题，有需要的可以参考借鉴。2016-08-08
javascript通过className来获取元素的简单示例代码
本篇文章主要是对javascript通过className来获取元素的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论