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程序设计有所帮助。

您可能感兴趣的文章:

Bootstrap modal使用及点击外部不消失的解决方法
这篇文章主要为大家详细介绍了Bootstrap modal使用及点击外部不消失的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Bootstrap实现带暂停功能的轮播组件(推荐)
最近小编在项目中用到了一款带轮播组件，功能非常齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，下面小编通过本文给大家详细介绍下实现过程，需要的朋友参考下吧
2016-11-11
js css+html实现简单的日历
这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
javascript异步处理工作机制详解
笼统地说，异步在javascript就是延时执行。严格来说，javascript中的异步编程能力都是由BOM与DOM提供的，如setTimeout，XMLHttpRequest，还有DOM的事件机制，等等很多。这些东西都有一个共同的特点，就是拥有一个回调函数，实现控制反转。
2015-04-04
基于Proxy的小程序状态管理实现
这篇文章主要介绍了基于Proxy的小程序状态管理实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
微信小程序如何获取openid及用户信息
这篇文章主要介绍了微信小程序如何获取openid及用户信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
最全的package.json解析
从我们接触前端开始，每个项目的根目录下一般都会有一个package.json文件，这个文件定义了当前项目所需要的各种模块，以及项目的配置信息，本文就详细的来介绍一下
2021-07-07
JavaScript实现封装一个快速生成目录树的全局脚本
目录树可以很好的介绍项目中各文件目录的用途，帮助读者了解整个项目结构。本文就来用JavaScript封装一个快速生成目录树的全局脚本，希望对大家有所帮助
2023-03-03
原生js图片轮播效果实现代码
这篇文章主要为大家详细介绍了基于原生js实现图片轮播效果的具体代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JS实现全屏的四种写法
这篇文章主要为大家详细介绍了JS或jquery实现全屏的四种写法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12