本文实例讲述了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建站有所帮助。
查看更多关于WordPress增加返回顶部效果的方法的详细内容...