“返回顶部”的文字或者图片链接,点击这个链接后就会自动跳到该页面的顶部。实现这种功能最常用的一种方法是在网页的 body 标签下添加一个“标记”,即:
<body>
<a name=”top”>
然后在页脚添加一个链接即可。
<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 代码添加到页脚内,然后再添加如下的链接:
<a href=”javascript:void(0)” onclick=”goto_top()”>返回页顶</a>
OK,完事~
对于 WordPress 博客而言,我们可以这样做:
这里我把上述的 JS 代码单独写成一个文件 gototop.js(下载点击这里),把这个文件 FTP 到所使用的主题目录下,然后编辑 footer.php ,添加文件调用语句:
<script src=”<?php bloginfo(‘stylesheet_directory’); ?>/gototop.js” type=”text/javascript” charset=”utf-8″></script>
最后在 footer.php 相应的地方加入
<a href=”javascript:void(0)” onclick=”goto_top()”>返回页顶</a>
这样你也可以拥有这个动态的效果了。。。(转自网络)
晕,就一个返回顶部的链接,有必要这么复杂吗?