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

► 首页 » 网页美化 » 滚动返回页面顶部的JS特效

字体大小:T | T

Tag: JavaScript , wordpress | Author: zEUS. | 点击量4976次 |

似乎标题写得比较难懂…

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

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

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

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

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

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

//<![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.

原文链接:
转载原创文章请注明:

2008-10-4 0:03 分类: 网页美化 19条评论

本文评论 19 comments

较新评论 »

美丽星点说：

2008年, 十月 7日于9:33 下午

请问zeus，代码高亮是用的coolcode么：还有我的coolcode不会产生彩色的分辨效果，正纳闷中、、、、

回复
- zEUS. 说：
  
  2008年, 十月 7日于11:29 下午
  
  我放弃了 coocode 选择了猫猫推荐的
  http://wordpress.org/extend/plugins/wp-syntax/
  
  回复
小七说：

2008年, 十月 5日于10:11 上午

谢谢~喜欢这种效果

回复
jc 说：

2008年, 十月 4日于4:22 下午

我晕，一个返回顶部用这么多代码，搞流氓软件啊？呵呵～

回复
- zEUS. 说：
  
  2008年, 十月 6日于10:18 上午
  
  厶办法啊…
  
  回复
Rowe 说：

2008年, 十月 4日于12:04 下午

代码有点冗长…
楼上所言即是～现在的js框架已经很成熟了很多情况下不需要自己再写了。
例如：http://www.rowelog.cn/download/smoothscroll/

回复
- zEUS. 说：
  
  2008年, 十月 6日于10:16 上午
  
  40+行代码，不足1K 我觉得还凑活～
  JS 要我自己写我也写不出来啊～我也只能在网上搜搜而已…
  
  回复
Yacca 说：

2008年, 十月 4日于11:14 上午

如果评论有360楼呢…-.- 我只是假设

滚起来有点慢

虽然效果还不错,但我还是求简单嘿嘿

回复
wayne 说：

2008年, 十月 4日于10:51 上午

试了下, 还不错

回复
motta 说：

2008年, 十月 4日于10:33 上午

那会儿我google了好几天都没找到代码…. 最后把mg12的代码拿来用了…. 看来我google水平亟待提高…

回复
simpleseo 说：

2008年, 十月 4日于10:28 上午

刚才到你的右下角试了一次，这个滚动效果不错，
但我在考虑，它对速度的影响有多大

回复
slevin 说：

2008年, 十月 4日于10:15 上午

木有用啊

回复
sofish 说：

2008年, 十月 4日于10:02 上午

我都是用smoothscroll来完成的，哈哈，1Kb…

回复