WordPress增加返回顶部效果的方法
发布时间：2014-12-18 11:27:18 作者：佚名 
我要评论
我要评论这篇文章主要为大家介绍了WordPress增加返回顶部效果的方法,通过引入自定义的js文件来实现返回顶部的效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了WordPress增加返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下：
返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.
第一步:在下面主题文件footer.php底下加上这段代码:
复制代码
代码如下:<script src="top.js" type="text/javascript" charset="utf-8"></script >
<div id="scroll"><a href="javascript：void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div>
<div id="scroll"><a href="javascript：void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div>
top.js代码如下:
复制代码
代码如下://<![CDATA[
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
//]]>
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
//]]>
第二步:在主题文件style.css文件中加入以下样式:
复制代码
代码如下:/*返回顶部*/
#scroll {display:block; width:30px; margin-right:-380px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}
#scroll {display:block; width:30px; margin-right:-380px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}
这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.
希望本文所述对大家的WordPress建站有所帮助。
相关文章
- WordPress的模板非常灵活，一个优秀的模板所实现的功能往往超出你的想象。这篇文章说说在WordPress里调用文章的发布日期。2009-12-28
- 在浏览网页的时候, 我们经常会看到很多人在他们网站的搜索栏里显示文字提示, 当鼠标点击搜索栏, 则提示信息消失.2011-05-10
- Wordpress自带着wp_tag_cloud()函数,但只在页面侧边显示往往就不够了.需要一个单页来放所有的Tags2010-01-24
- 本打算将导航菜单里的重要链接修改一下颜色以加亮显示。虽然知道修改应该是在链接更多选项里CSS类中进行，但具体设置方法还是不太清楚，尝试求助搜索引擎也没找什么有价值2012-04-25
- 大部分人的习惯都是在首页显示文章的摘要，本文总结了几种在首页显示摘要的方法。2011-04-21
- wordpress固定链接设置参数： 参数不多说，很死的东西，按照WordPress官方文档列表如下2013-02-26
- WordPress发送邮件的函数是wp_mail()，默认以纯文本（text/plain）格式发送，通过wp_mail()提供的filter函数可以更改为以HTML格式发送，也可以通过制定wp_mail()的第四个参2012-07-26
- Wordpress博客从2.7版本就自带了嵌套回复功能，但是很多主题都没有添加该效果，大部分博主也用博客插件来实现该功能，可博客插件的嵌套回复的内容样式与父评论不能保持一致2010-09-11
- 今天我们要实现的就是即使收到再多的垃圾评论，这些发送评论的站点也不会被搜索引擎索引到。2011-01-30
- 对于Wordpress，ItBuLu曾经也接触过一点点，因为不喜欢MYSQL的备份繁琐，不管是网站还是博客，都优先考虑ASP+ACC程序。2010-02-21
最新评论