304 字2 分钟

返回页面顶部的JS特效

2009-10-20更新于 2014-09-12设计开发#JavaScript

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

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

1
<body>
2
  <a name="top"></a>
3
</body>

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

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

还有更简单的，我一般都是这么干的，一个空标记就可以返回顶部，不知道为什么，反正这样行的通：

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

有朋友留言说需要这段代码，找出来贴一下：

1
//<![CDATA[
2
var goto_top_type = -1;
3
var goto_top_itv = 0;
4
function goto_top_timer() {
5
  var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
6
  var moveby = 15;
7
  y -= Math.ceil((y * moveby) / 100);
8
  if (y < 0) {
9
    y = 0;
10
  }
11
  if (goto_top_type == 1) {
12
    document.documentElement.scrollTop = y;
13
  } else {
14
    document.body.scrollTop = y;
15
  }
16
  if (y == 0) {
17
    clearInterval(goto_top_itv);
18
    goto_top_itv = 0;
19
  }
20
}
21
function goto_top() {
22
  if (goto_top_itv == 0) {
23
    if (document.documentElement && document.documentElement.scrollTop) {
24
      goto_top_type = 1;
25
    } else if (document.body && document.body.scrollTop) {
26
      goto_top_type = 2;
27
    } else {
28
      goto_top_type = 0;
29
    }
30
    if (goto_top_type > 0) {
31
      goto_top_itv = setInterval("goto_top_timer()", 50);
32
    }
33
  }
34
}
35
//]]>

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

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

返回页面顶部的JS特效

文章信息

历史留言归档