回来页面顶部的JS特效 _JavaScript

返回页面顶部的JS特效

一个很贴心的小功能，返回页面顶部，很多网站都有。一个文字或者图片链接，点击这个链接后就会自动跳到该页面的顶部。

常用的方法是在body标签添加一个标记。

<body>   
<a name="top">

然后在需要的地方添加链接即可。

<a href="#top">返回</a>

还有更简单的，一个空标记就可以返回顶部。

<a href="#">返回顶部</a>

现在提供一个带效果的返回顶部的代码。

<script type="text/javascript">
  var goto_top_type = -1;   
  var goto_top_itv = 0;   
   
  function goto_top_timer()   
  {   
    var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;   
    var moveby = 15;   
   
    y -= Math.ceil(y * moveby / 100);   
    if (y < 0) {   
      y = 0;   
    }   
   
    if (goto_top_type == 1) {   
      document.documentElement.scrollTop = y;   
    }   
    else {   
      document.body.scrollTop = y;   
    }   
   
    if (y == 0) {   
      clearInterval(goto_top_itv);   
      goto_top_itv = 0;   
    }   
  }   
   
  function goto_top()   
  {   
    if (goto_top_itv == 0) {   
      if (document.documentElement && document.documentElement.scrollTop) {   
        goto_top_type = 1;   
      }   
      else if (document.body && document.body.scrollTop) {   
        goto_top_type = 2;   
      }   
      else {   
        goto_top_type = 0;   
      }   
   
      if (goto_top_type > 0) {   
        goto_top_itv = setInterval('goto_top_timer()', 50);   
      }   
    }   
  }   
</script>

然后再在适当的地方添加如下的链接：

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>