似乎标题写得比较难懂…
博客也好，网站也好，我们都习惯在页脚处加一个“返回顶部”的文字或者图片链接，点击这个链接后就会自动跳到该页面的顶部。
实现这种功能最常用的一种方法是在网页的 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.
- 原文链接:
- 转载原创文章请注明:
Name : zEUS.
学习研究之，尽快采用之。
谢谢啦
爽矣