網生@誌 | zEUS.'Blog

首页 » 网页美化 » 2008-10-4 »

滚动返回页面顶部的JS特效

字体大小:T | T

似乎标题写得比较难懂…

博客也好,网站也好,我们都习惯在页脚处加一个“返回顶部”的文字或者图片链接,点击这个链接后就会自动跳到该页面的顶部。
实现这种功能最常用的一种方法是在网页的 body 标签下添加一个“标记”,即:

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

然后在页脚添加一个链接即可。

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

不过现在似乎比较流行动态的特效,比如 Ajax JQuery 什么的,这也要得益于网络传输速度的提高,不然这么些 JavaScript 无疑会严重降低页面载入的时间…

前不久看到一些博客的“返回顶部”效果是动态的从页脚滚动到页面顶部的,而不是常规的瞬间弹到顶部,看起来挺酷的。(效果可以直接参考本站底部的“返回顶部”,点击一下即可~)于是就 google 了一下,找到了相应的 JS 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//<![CDATA[
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);
}
}
}
//]]>

将上述 JS 代码添加到页脚内,然后再添加如下的链接:

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

OK,完事~

对于 WordPress 博客而言,我们可以这样做:
这里我把上述的 JS 代码单独写成一个文件 gototop.js(下载点击这里),把这个文件 FTP 到所使用的主题目录下,然后编辑 footer.php ,添加文件调用语句:

1
<script src="<?php bloginfo('stylesheet_directory'); ?>/gototop.js" type="text/javascript" charset="utf-8"></script>

最后在 footer.php 相应的地方加入

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

这样你也可以拥有这个动态的效果了~

嘿嘿,是不是 dead easy 呢~

zEUS.

« »

发表您的看法

TOP COMMENTS BOTTOM