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

双人余先生 發表於 2023-11-6 00:00:00

本文实例讲述了WordPress增加返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下：

返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.

第一步:在下面主题文件footer.php底下加上这段代码:
<blockquote>
<ol>
<li>
<script src="top.js" type="text/javascript" charset="utf-8"></script > 
</li>
<li>
<div id="scroll"><a href="javascript：void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div> 
</li>
</ol>
</blockquote>

 top.js代码如下:
<blockquote>
<ol>
<li>
//<![CDATA[ 
</li>
<li>
var goto_top_type = -1; 
</li>
<li>
var goto_top_itv = 0; 
</li>
<li>
function goto_top_timer() 
</li>
<li>
{ 
</li>
<li>
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop; 
</li>
<li>
var moveby = 15; 
</li>
<li>
y -= Math.ceil(y * moveby / 100); 
</li>
<li>
if (y < 0) { 
</li>
<li>
y = 0; 
</li>
<li>
} 
</li>
<li>
if (goto_top_type == 1) { 
</li>
<li>
document.documentElement.scrollTop = y; 
</li>
<li>
} 
</li>
<li>
else { 
</li>
<li>
document.body.scrollTop = y; 
</li>
<li>
} 
</li>
<li>
if (y == 0) { 
</li>
<li>
clearInterval(goto_top_itv); 
</li>
<li>
goto_top_itv = 0; 
</li>
<li>
} 
</li>
<li>
} 
</li>
<li>
function goto_top() 
</li>
<li>
{ 
</li>
<li>
if (goto_top_itv == 0) { 
</li>
<li>
if (document.documentElement && document.documentElement.scrollTop) { 
</li>
<li>
goto_top_type = 1; 
</li>
<li>
} 
</li>
<li>
else if (document.body && document.body.scrollTop) { 
</li>
<li>
goto_top_type = 2; 
</li>
<li>
} 
</li>
<li>
else { 
</li>
<li>
goto_top_type = 0; 
</li>
<li>
} 
</li>
<li>
if (goto_top_type > 0) { 
</li>
<li>
goto_top_itv = setInterval('goto_top_timer()', 50); 
</li>
<li>
} 
</li>
<li>
} 
</li>
<li>
} 
</li>
<li>
//]]> 
</li>
</ol>
</blockquote>

 第二步:在主题文件style.css文件中加入以下样式:
<blockquote>
<ol>
<li>
/*返回顶部*/ 
</li>
<li>
#scroll {display:block; width:30px; margin-right:-380px; 
</li>
<li>
position:fixed; 
</li>
<li>
right:50%; 
</li>
<li>
top:90%; 
</li>
<li>
_margin-right:-507px; 
</li>
<li>
_position:absolute; 
</li>
<li>
_margin-top:30px; 
</li>
<li>
_top:expression(eval(document.documentElement.scrollTop)); 
</li>
<li>
} 
</li>
<li>
#scroll a { 
</li>
<li>
display:block; 
</li>
<li>
float:right; 
</li>
<li>
padding:9px 5px; 
</li>
<li>
cursor: pointer; 
</li>
<li>
background-color:#444; 
</li>
<li>
color:#fff; 
</li>
<li>
border-radius:5px; 
</li>
<li>
text-decoration: none; 
</li>
<li>
font-weight:bold; 
</li>
<li>
} 
</li>
<li>
#scroll a:hover { 
</li>
<li>
background-color:#333; 
</li>
<li>
color:#669900; 
</li>
<li>
text-decoration: none; 
</li>
<li>
font-weight:bold; 
</li>
<li>
} 
</li>
</ol>
</blockquote>
 这样我们再清除缓存是不是就可以看到有个返回顶部的效果按钮了,这样你的WordPress博客中的所有页面都会有返回顶部效果了.



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

頁: [1]

琼殿技术论坛's Archiver

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