WordPress纯代码实现“返回顶部、返回底部、评论”效果

相信大家对返回顶部、返回底部这些功能已经不陌生了，wordpress上也有很多插件可以实现，也有很多代码方式；

今天我分享的也是以纯代码实现"返回顶部、返回底部、评论"的效果，但是样式跟其他人的可能不同，个人认为比较美观实用一些，可以在其中增加一些超链接或者“关闭/显示侧边栏”按钮，

效果图如下：

## 默认是以图标的方式贴在右下角边栏，鼠标滑过弹出文字说明，单击执行效果。

添加方法（三步实现）：

1、下载图标图片上传到主题目录下的images文件夹下：点击此处下载（图片是白色透明的哦~）

2、首先编辑主题目录下的footer.php文件，在 代码之前添加以下的代码（复制代码的时候不要复制前面的行号哦~）：

<div id="sticky-nav"><a class="gotop" onclick="window.scrollTo(0,0);return false;" href="#top">
<span>返回顶部</span></a> 
<a class="about" href="https://www.xinfangs.com" target="_blank" rel="noopener">
<span>关于我们</span></a> 
<?php if ( is_singular() && comments_open() ) { ?>
<a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="#respond">
<span>发表评论</span></a>
<?php } ?>
<a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span>
<span class="show-sidebar" style="display:none;">显示侧边</span></a>
<a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon">
<span>前往底部</span></a></div>

3、再编辑主题目录下的style.css文件，在最后面添加如下的代码，给其增加样式：

#sticky-nav {-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;position:fixed;right:0px;bottom: 5%;
	z-index: 9999;width:30px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.offsetHeight/2))}
#sticky-nav a:hover { right:56px;}
#sticky-nav a {background:url(images/sideTools.png) no-repeat;width:30px;height:30px;display:block;-webkit-border-top-left-radius:3px;-moz-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-bottom-left-radius:3px;border-top-left-radius: 3px;border-bottom-left-radius: 3px;position:relative;text-decoration:none;}
#sticky-nav span {background:#333;-webkit-border-top-right-radius:3px;-moz-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-bottom-right-radius:3px;	border-top-right-radius:3px;border-bottom-right-radius:3px;font-size:12px;position:absolute;right: -56px;padding:6.5px 4px;color:#fff;}
#sticky-nav a:hover {overflow:visible;}
#sticky-nav a:hover span {-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);	transform:translate(0,0);opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =100)";filter:alpha(opacity=100)}
#sticky-nav span:before,#sticky-nav span:after {content:'';display:block;width:0;height:0; }
#sticky-nav span:before {border-left-color:#ccc;right:-8px;}
#sticky-nav a.gotop {background-position: -3px -3px;background-color: #333;margin-bottom: 5px;}
#sticky-nav a.gobtm {background-position: -4px -186px;background-color: #333;}
#sticky-nav a.gocom {background-position: -4px -150px;background-color: #333;margin-bottom: 5px;}
#sticky-nav a.bianlan {	background-position: -3px -77px;background-color: #333;	margin-bottom: 5px;}
.close-sidebar {cursor:pointer;}
.show-sidebar {	cursor:pointer;}
#sticky-nav a.about {background-position: -3px -40px;background-color: #333;margin-bottom: 5px;}

<a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span>
<span class="show-sidebar" style="display:none;">显示侧边</span></a>

如果不需要“关于我们”可删除下面代码：

<a class="about" href="https://www.xinfangs.com/" target="_blank" rel="noopener"> <span>关于我们</span></a>

且不需要往下看教程了，刷新页面，已经有效果了吧~

增加“关闭/显示侧边栏”按钮的js控制文件：

1、请复制以下代码另存为all.js,上传到网站FTP中：
注意：下面js代码中那个宽度两个width值需要相应修改，1280px是整个网站的宽度，900px是文章主体的宽度。

jQuery(document).ready(function($){

$('.close-sidebar').click(function() {  //点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时

   $('.close-sidebar,.sidebar').hide();       //隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏”

   $('.show-sidebar').show();     //显示class=“show-sidebar”的对象,即导航中“显示侧边栏”

   $('.content').animate({width: "1280px"}, 0); }); //“文章主体部分”的宽度增加到1280px

$('.show-sidebar').click(function() {  //点击导航中“显示侧边栏”时

   $('.show-sidebar').hide();             //隐藏导航中“显示侧边栏”

   $('.close-sidebar,.sidebar').show();        //显示导航中“关闭侧边栏”和主题的“侧边栏”

   $('.content').animate({width: "900px"}, 0);});    //“文章主体部分”的宽度收缩回900px
});

2、编辑主题目录下的footer.php文件，在 代码之前添加以下的代码（载入all.js）：

<script src="https://www.53431.com/js/all.js"></script>

## 上面代码中的src路径修改为刚才你上传all.js到FTP中的路径。

到这里教程就结束了，都搞好后，ctrl+f5刷新下网站看看效果哦，可能不同的wp主题css样式都不太相同，如果有样式有偏差，就需要微微调整css样式了~