WordPress增加返回頂部效果的方法
本文實例講述了WordPress增加返回頂部效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
返回頂部效果不是WordPress自帶的功能,這是一款js或jquery的效果,這里就來給大家介紹在WordPress中增加反回頂部效果的方法.
第一步:在下面主題文件footer.php底下加上這段代碼:
<div id="scroll"><a href="javascript:void(0)" onclick="goto_top()" title="返回頂部">TOP</a></div>
top.js代碼如下:
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獲取指定分類文章數(shù)量的方法
欄 目:WordPress
本文標題:WordPress增加返回頂部效果的方法
本文地址:http://mengdiqiu.com.cn/a1/WordPress/12720.html
您可能感興趣的文章
- 05-31wordpress修改后臺登錄地址教程
- 05-31WordPress自定義用戶頭像實現(xiàn)代碼
- 01-11修改wordpress上傳臨時目錄解決wordpress無法安裝插件包的方法
- 01-11WordPress增加文章排序方式
- 01-11自己做wordpress評論插件修改評論樣式(兩步美化評論內(nèi)容)
- 01-11wordpress get
- 01-11wordpress獲取文章評論數(shù)過濾掉作者代碼分享
- 01-11在wordpress文章末尾添加內(nèi)容的簡單方法
- 01-11不用wordpress插件顯示文章瀏覽統(tǒng)計功能代碼修改(原理分析)
- 01-11wordpress dynamic


閱讀排行
本欄相關
- 05-31wordpress修改后臺登錄地址教程
- 05-31WordPress自定義用戶頭像實現(xiàn)代碼
- 01-11WordPress增加文章排序方式
- 01-11修改wordpress上傳臨時目錄解決wordpre
- 01-11wordpress get
- 01-11自己做wordpress評論插件修改評論樣式
- 01-11在wordpress文章末尾添加內(nèi)容的簡單方
- 01-11wordpress獲取文章評論數(shù)過濾掉作者代
- 01-11wordpress dynamic
- 01-11不用wordpress插件顯示文章瀏覽統(tǒng)計功
隨機閱讀
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-10SublimeText編譯C開發(fā)環(huán)境設置
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-10C#中split用法實例總結
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-11ajax實現(xiàn)頁面的局部加載
- 04-02jquery與jsp,用jquery