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