具有弹性的点击返回网页顶部代码

具有弹性的点击返回网页顶部代码:
当一个网页较长时，如果同网页底部拖动滚动条回到顶部算是一个不大不小的麻烦事情，尤其是操作比较频繁的情况下更是如此，下面就介绍一个点击能够返回网页顶部的功能，并且此功能具有弹性效果。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性返回顶部JS代码</title>
<style>
body 
{
  height:3600px;
}
#goTopBtn 
{
  position:fixed;
  text-align:center;
  line-height:30px;
  width:30px;
  bottom: 5px;
  height:33px;
  font-size:12px;
  cursor:pointer;
  right:0px;
  _position:absolute;
  _right:auto
}
</style>
<script type="text/javascript"> 
function goTopEx() { 
  var obj = document.getElementById("goTopBtn"); 
   
  function getScrollTop() 
  { 
    return document.documentElement.scrollTop + document.body.scrollTop; 
  } 
   
  function setScrollTop(value) 
  { 
    if (document.documentElement.scrollTop) 
    { 
      document.documentElement.scrollTop = value; 
    } 
    else 
    { 
      document.body.scrollTop = value; 
    } 
  } 
   
  window.onscroll = function() 
  { 
    getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none"; 
  } 
   
  obj.onclick = function() 
  { 
    var goTop = setInterval(scrollMove, 10); 
    function scrollMove() 
    { 
      setScrollTop(getScrollTop() / 1.1); 
      if (getScrollTop() < 1) clearInterval(goTop); 
    } 
  } 
} 
</script>
</head>
<body style="text-align:center">
<div style="display: none" id="goTopBtn"><img border=0 src="img/top.png"></div>
<script type="text/javascript">
goTopEx()
</script> 
超出首屏范围，即会出现TOP按钮，否则自动隐藏。
</body>
</html>

以上代码实现了我们想要的功能，当下拉滚动条的时候能够出现一个图片，当地点击此图片的时候，能够平滑的回到网页顶部，下面就简单介绍一下如何实现此功能。

一.实现原理:
当下拉滚动条的时候，会将点击按钮设置为显示，当点击按钮的时候通过定时器函数不断的设置scrollTop值，当小于1的时候停止设置（这个时候已经基本返回顶部），这样就实现了弹性返回顶部的效果。
二.代码注释:
1.var obj = document.getElementById("goTopBtn")，获取id属性值为goTopBtn的对象。
2.function getScrollTop(){},获取滚动条向下拖动的尺寸。
3.return document.documentElement.scrollTop + document.body.scrollTop，用来兼容各主流浏览器。
4.function setScrollTop(value){}，设置滚动的距离，里面有兼容性写法。
5.window.onscroll = function(){},触发滚动事件。
6.getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none"，如果已经向下滚动距离大于0，那么将点击按钮设置为可见，否则不可见。
7.obj.onclick = function(){},为点击按钮绑定事件处理函数。
8.var goTop = setInterval(scrollMove, 10)，通过定时器函数每隔十秒调用一次scrollMove()函数，以此实现弹性上划效果。
9.function scrollMove(){}，用来规定上划的规则。
10.setScrollTop(getScrollTop() / 1.1)，每执行一次scrollMove()函数就设定一次新的scrollTop值。
11.if (getScrollTop() < 1) clearInterval(goTop)，如果scrollTop值小于1，就停止定时器函数的执行。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8026

更多内容可以参阅:http://www.softwhy.com/javascript/

具有弹性的点击返回网页顶部代码

猜你喜欢