用代码实现WordPress返回顶部功能
当一篇文章过长时，我们希望能够实现快速返回顶部的功能。对于wordpress而言，有些主题内置了返回顶部功能，而没有内置该功能的主题，我们可以通过修改代码实现。
首先是css代码部分，将其复制到主题的css文件中，
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=‘#99EEEEEE’,EndColorStr=‘#99EEEEEE’);text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #000000;}
然后将下列代码复制到主题文件foot.php文件中的标签之前，
01 <script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
02 <script type=‘text/javascript’>
03 $(function() {
04 $.fn.scrollToTop = function() {
05 $(this).hide().removeAttr(“href”);
06 if ($(window).scrollTop() != “0″) {
07 $(this).fadeIn(“slow”)
08 }
09 var scrollDiv = $(this);
10 $(window).scroll(function() {
11 if ($(window).scrollTop() == “0″) {
12 $(scrollDiv).fadeOut(“slow”)
13 } else {
14 $(scrollDiv).fadeIn(“slow”)
15 }
16 });
17 $(this).click(function() {
18 $(“html, body”).animate({
19 scrollTop: 0
20 }, “slow”)
21 })
22 }
23 });
24 $(function() {
25 $(“#w2b-StoTop”).scrollToTop();
26 });
27 </script>
28 <a href=‘#’ id=‘w2b-StoTop’ style=‘display:none;’> ^ 返回顶部 </a>
02 <script type=‘text/javascript’>
03 $(function() {
04 $.fn.scrollToTop = function() {
05 $(this).hide().removeAttr(“href”);
06 if ($(window).scrollTop() != “0″) {
07 $(this).fadeIn(“slow”)
08 }
09 var scrollDiv = $(this);
10 $(window).scroll(function() {
11 if ($(window).scrollTop() == “0″) {
12 $(scrollDiv).fadeOut(“slow”)
13 } else {
14 $(scrollDiv).fadeIn(“slow”)
15 }
16 });
17 $(this).click(function() {
18 $(“html, body”).animate({
19 scrollTop: 0
20 }, “slow”)
21 })
22 }
23 });
24 $(function() {
25 $(“#w2b-StoTop”).scrollToTop();
26 });
27 </script>
28 <a href=‘#’ id=‘w2b-StoTop’ style=‘display:none;’> ^ 返回顶部 </a>
如果你的主题已经加载了jquery文件，请去掉该段代码中第1行。在28行处可以将文字替换为图片，当然相应的CSS部分也需要修改。
完成后，向下滚动网页将会看到如下的图标。
| anyShare分享到： | |
| |
本文地址: 用代码实现WordPress返回顶部功能
本站采用署名-非商业性使用-相同方式共享 3.0 许可协议，转载请注明转自Simnovo
10 条评论
这个图标很鲜明啊
用插件，鄙视你这个用不了插件的主题
@平板电脑推荐 谁说用不了插件？
@zrqx008 你群里说的，邮件回复通知点都不准，点上一篇去了
@平板电脑推荐 我没有说过这话，回复通知那个估计是缓存的问题。
直接在style.css里添加就好了吧~
@zzy 是两部分文件，css的部分添加CSS（style.css）中就行了。
谢谢你！
博客是要添加一个这个功能
话说在页首的时候会自动隐藏吧，