a标签实现返回顶部和跳转至评论框

更新于 2020-07-28 09:19:22首发于 2015-03-05 09:11:381.62K

现在网上都有很多种方法实现返回顶部和跳转至评论框的方法，有简单的也有复杂的，今天我就分享本主题所使用的方法，个人认为是比较简单的。

a标签实现返回顶部和跳转至评论框-第1张-boke112百科(boke112.com)

首先，打开我们所使用的主题中的 footer.php 文件，在</footer>前面添加以下代码并保存。

<div class="tools">
<a href="#" class="tools_top" title="返回顶部"></a>
<?php wp_reset_query(); if ( is_single() || is_page() ) { ?>
<a href="#respond" class="tools_comments" title="发表评论"></a>
<?php } else {?>
<a href="<?php bloginfo('url');?>/zxly#respond" class="tools_comments" title="给我留言"></a>
<?php } ?>
</div>

第 6 行代码的意思就是如果不在页面或日志页就跳转到我们留言板的评论框中。

接着，打开我们所使用的主题中的 style.css 文件，加上以下代码保存即可。

/*返回顶部、查看评论、转到底部*/
.tools{ position:fixed; bottombottom:50px; rightright:20px; z-index:1000}
.tools_comments,
.tools_top{ display:block; height:32px; width:32px; background:url(image/top.gif) no-repeat; background-position:0 -64px; margin-top:5px;}
.tools_comments:hover{ background-position:0 -96px;}
.tools_top{ background-position:0 0;}
.tools_top:hover{ background-position:0 -32px}

其中，第 2 行代码就是定位的，如离右边和底部多远，可以自己调整；第 4 行代码中的 background:url(image/top.gif)就是本主题所使用的返回顶部和跳转至评论框的背景图。