WordPress增加返回頂部效果的方法
發(fā)布時(shí)間：2014-12-18 11:27:18 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了WordPress增加返回頂部效果的方法,通過(guò)引入自定義的js文件來(lái)實(shí)現(xiàn)返回頂部的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了WordPress增加返回頂部效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
返回頂部效果不是WordPress自帶的功能,這是一款js或jquery的效果,這里就來(lái)給大家介紹在WordPress中增加反回頂部效果的方法.
第一步:在下面主題文件footer.php底下加上這段代碼:
復(fù)制代碼
代碼如下:<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代碼如下:
復(fù)制代碼
代碼如下://<![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文件中加入以下樣式:
復(fù)制代碼
代碼如下:/*返回頂部*/
#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;
}
這樣我們?cè)偾宄彺媸遣皇蔷涂梢钥吹接袀€(gè)返回頂部的效果按鈕了,這樣你的WordPress博客中的所有頁(yè)面都會(huì)有返回頂部效果了.
希望本文所述對(duì)大家的WordPress建站有所幫助。
相關(guān)文章
- WordPress的模板非常靈活，一個(gè)優(yōu)秀的模板所實(shí)現(xiàn)的功能往往超出你的想象。這篇文章說(shuō)說(shuō)在WordPress里調(diào)用文章的發(fā)布日期。2009-12-28
- 在瀏覽網(wǎng)頁(yè)的時(shí)候, 我們經(jīng)常會(huì)看到很多人在他們網(wǎng)站的搜索欄里顯示文字提示, 當(dāng)鼠標(biāo)點(diǎn)擊搜索欄, 則提示信息消失.2011-05-10
WordPress 標(biāo)簽Tags頁(yè)面制作方法
Wordpress自帶著wp_tag_cloud()函數(shù),但只在頁(yè)面?zhèn)冗咃@示往往就不夠了.需要一個(gè)單頁(yè)來(lái)放所有的Tags2010-01-24WordPress菜單CSS類選項(xiàng)設(shè)置方法
本打算將導(dǎo)航菜單里的重要鏈接修改一下顏色以加亮顯示。雖然知道修改應(yīng)該是在鏈接更多選項(xiàng)里CSS類中進(jìn)行，但具體設(shè)置方法還是不太清楚，嘗試求助搜索引擎也沒(méi)找什么有價(jià)值2012-04-25wordpress首頁(yè)顯示摘要的幾種方法小結(jié)
大部分人的習(xí)慣都是在首頁(yè)顯示文章的摘要，本文總結(jié)了幾種在首頁(yè)顯示摘要的方法。2011-04-21Wordpress固定鏈接偽靜態(tài)的設(shè)置方法
wordpress固定鏈接設(shè)置參數(shù)： 參數(shù)不多說(shuō)，很死的東西，按照WordPress官方文檔列表如下2013-02-26- WordPress發(fā)送郵件的函數(shù)是wp_mail()，默認(rèn)以純文本（text/plain）格式發(fā)送，通過(guò)wp_mail()提供的filter函數(shù)可以更改為以HTML格式發(fā)送，也可以通過(guò)制定wp_mail()的第四個(gè)參2012-07-26
WordPress中非插件實(shí)現(xiàn)嵌套回復(fù)效果的方法
Wordpress博客從2.7版本就自帶了嵌套回復(fù)功能，但是很多主題都沒(méi)有添加該效果，大部分博主也用博客插件來(lái)實(shí)現(xiàn)該功能，可博客插件的嵌套回復(fù)的內(nèi)容樣式與父評(píng)論不能保持一致2010-09-11WordPress 評(píng)論者超鏈接實(shí)現(xiàn)重定向跳轉(zhuǎn)的方法
今天我們要實(shí)現(xiàn)的就是即使收到再多的垃圾評(píng)論，這些發(fā)送評(píng)論的站點(diǎn)也不會(huì)被搜索引擎索引到。2011-01-30- 對(duì)于Wordpress，ItBuLu曾經(jīng)也接觸過(guò)一點(diǎn)點(diǎn)，因?yàn)椴幌矚gMYSQL的備份繁瑣，不管是網(wǎng)站還是博客，都優(yōu)先考慮ASP+ACC程序。2010-02-21