WordPress增加返回顶部效果的方法

本文实例讲述了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>

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);

}

}

}

//]]>

第二步:在主题文件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;

}

这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.

希望本文所述对大家的WordPress建站有所帮助。