首页 » 非电影 » 正文

701 次点击

片名: 为WordPress添加“返回顶部”的导航按钮

导演:

类型: 非电影

主演:

国家:

上映时间: 未知

IMDB评分: 未知

关键词:

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

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

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

1.在头文件中加入按钮元素

在头部文件header.php中加入如下代码:
[sourcecode language='php']


[/sourcecode]
简单释义:shangxia的div标签中包含三个div标签:shang(向上)、comt(评论)、xia(向下),判断语句的作用是当在首页时只显示shang和xia两个标签(具体显示效果参见本站)

2.在主题css中加入以上标签的定位和样式

在主题的style.css文件中加入已下代码:
[sourcecode language='php']
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
[/sourcecode]
简单释义:第一行中定位了按钮出现的位置,大家可以参考自己的博客主题做相应微调;后三行中设定了三个按钮的样式,请大家自己搜集素材,别忘了上传到服务器相应位置。

3.在js文件中添加jQuery滑动效果

在主题的js文件(一般在js文件内,扩展名师.js的文件,可以查看头文件中是否调用了这个js文件)打开加入已下代码:
[sourcecode language='php']
$('#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);});
[/sourcecode]

至此全部完成!祝你好运,遇到问题可以在本文留言。