细心的朋友应该会看到在本站的首页文章列表（内页的文章主体）和 侧边栏之间的夹缝中有三个按钮，分别代表向上到顶部、定位到评论部分、向下到页底，给读者提供了一定的便利，对优化用户体验是很好的。今天优化了一下，就 是在首页隐藏评论按钮，因为首页没有评论，无法定位，显示也是多余的，所以加上判断语句，在首页就只显示上下两个箭头了。刚好也有人文是如何实现这个个性 化功能的，于是写篇文章总结一下，以供朋友们查阅。
其实很简单，基本上只需三步：
1.在头文件中加入按钮元素
在头部文件header.php中加入如下代码：
- <?php if (is_home()) { ?> <div id=”shangxia”><div id=”shang”></div><div id=”xia”></div></div> <?php } else { ?> <div id=”shangxia”><div id=”shang”></div><div id=”comt”></div><div id=”xia”></div></div> <?php } ?>
简单释义：shangxia的div标签中包含三个div标签：shang（向上）、comt（评论）、xia（向下），判断语句的作用是当在首页时只显示shang和xia两个标签（具体显示效果参见本站）
2.在主题css中加入以上标签的定位和样式
在主题的style.css文件中加入已下代码：
- #shangxia{position:fixed;top:40%;left:50%;margin-left:180px;display:block;} #shang{background:url(images/shang.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;} #xia{background:url(images/xia.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;} #comt{background:url(images/comt.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}
墨迹一下：第一行中定位了按钮出现的位置，大参考自己的博客主题做相应微调；后三行中设定了三个按钮的样式，请大家自己搜集素材，也可使用本站样式，别忘了上传到服务器相应位置。
3.在js文件中添加jQuery滑动效果
在主题的js文件（一般在js文件内，扩展名师.js的文件，可以查看头文件中是否调用了这个js文件）打开加入已下代码：
- $(‘#shang’).click(function(){$(‘html,body’).animate({scrollTop: ’0px’}, 800);}); $(‘#comt’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#comments’).offset().top}, 800);}); $(‘#xia’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#footer’).offset().top}, 800);});
到这就大功告成了，祝你们好运，有问题可以在本站留言。
1.在头文件中加入按钮元素
在头部文件header.php中加入如下代码：
- <?php if (is_home()) { ?> <div id=”shangxia”><div id=”shang”></div><div id=”xia”></div></div> <?php } else { ?> <div id=”shangxia”><div id=”shang”></div><div id=”comt”></div><div id=”xia”></div></div> <?php } ?>
简单释义：shangxia的div标签中包含三个div标签：shang（向上）、comt（评论）、xia（向下），判断语句的作用是当在首页时只显示shang和xia两个标签（具体显示效果参见本站）
2.在主题css中加入以上标签的定位和样式
在主题的style.css文件中加入已下代码：
- #shangxia{position:fixed;top:40%;left:50%;margin-left:180px;display:block;} #shang{background:url(images/shang.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;} #xia{background:url(images/xia.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;} #comt{background:url(images/comt.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}
墨迹一下：第一行中定位了按钮出现的位置，大参考自己的博客主题做相应微调；后三行中设定了三个按钮的样式，请大家自己搜集素材，也可使用本站样式，别忘了上传到服务器相应位置。
3.在js文件中添加jQuery滑动效果
在主题的js文件（一般在js文件内，扩展名师.js的文件，可以查看头文件中是否调用了这个js文件）打开加入已下代码：
- $(‘#shang’).click(function(){$(‘html,body’).animate({scrollTop: ’0px’}, 800);}); $(‘#comt’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#comments’).offset().top}, 800);}); $(‘#xia’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#footer’).offset().top}, 800);});
😛
💡