为WordPress添加“个性返回顶部”的导航按钮

细心的朋友应该会看到在本站的首页文章列表(内页的文章主体)和 侧边栏之间的夹缝中有三个按钮,分别代表向上到顶部、定位到评论部分、向下到页底,给读者提供了一定的便利,对优化用户体验是很好的。今天优化了一下,就 是在首页隐藏评论按钮,因为首页没有评论,无法定位,显示也是多余的,所以加上判断语句,在首页就只显示上下两个箭头了。刚好也有人文是如何实现这个个性 化功能的,于是写篇文章总结一下,以供朋友们查阅。

其实很简单,基本上只需三步:

1.在头文件中加入按钮元素
在头部文件header.php中加入如下代码:
  1. <?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文件中加入已下代码:
  1. #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文件)打开加入已下代码:
  1. $(‘#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中加入如下代码:

  1. <?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文件中加入已下代码:

  1. #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文件)打开加入已下代码:

  1. $(‘#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);});  

为WordPress添加“个性返回顶部”的导航按钮》上有2条评论

评论已关闭。