1 火箭上升式返回頂部圖片

• 2 第 1?步：加載jQuery庫(kù)文件
• 3 第 2?步：添加代碼到footer.php文件
• 4 第 3?步：添加代碼到CSS文件
• 5 第 4?步：添加返回頂部JS代碼

分享如何在WordPress主題中實(shí)現(xiàn)“點(diǎn)擊火箭返回到頂部的效果”。

• 如果你是一個(gè)WordPress高手，你知道如何將它移植到一個(gè)WordPress主題。
• 這篇文章也適合建站初學(xué)者。

火箭上升式返回頂部圖片

提前下載上面的圖像，建議將其放在主題目錄下的images文件夾中。

第 1?步：加載jQuery庫(kù)文件

• 加載jQuery庫(kù)文件，如果WordPress主題已經(jīng)加載，則可以忽略此步驟；

WordPress引入第3方j(luò)Query庫(kù)，請(qǐng)查看這篇教程?▼

怎么下載jQuery庫(kù)？WordPress引入第3方j(luò)Query庫(kù)

WordPress附帶了jQuery庫(kù)，但它自己的jQuery庫(kù)略有修改。如果你學(xué)習(xí)建站使用它，你可能無(wú)法實(shí)現(xiàn)一些jQuery效果。一個(gè)jQuery庫(kù)通常是50-90kb大，如果你的主機(jī)性能不高的，那么你的網(wǎng)站加載……

第 2?步：添加代碼到footer.php文件

將以下代碼添加到主題footer.php中的相應(yīng)位置?▼

<div class="one"></div>
<div id="backtotop" style="display:none;"></div>

第 3?步：添加代碼到CSS文件

將以下CSS代碼，添加到主題的style.css文件中?▼

.one {width:100%;height:3000px;}
#backtotop {background:url(images/rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;z-index:1000;}

第 4?步：添加返回頂部JS代碼

對(duì)于以下js代碼，你可以創(chuàng)建另一個(gè)js文件；

或?qū)⑵浜喜⒌浆F(xiàn)有主題的相關(guān)js文件中（推薦）；

或者你可以將其包裝在footer.php中的<script> </script>中?▼

var scrollTT = {
tTSpeed : 800, // 滾動(dòng)到頂部的時(shí)間
startFlyTime : 1000, // 火箭起飛的時(shí)間
restartTime : 1200, // 重置火箭位置的時(shí)間
flySpeed : 50, // 火箭向上飛行的速度
obj : $("#backtotop"), // 回到頂部的dom
flyTemp : '', // 一個(gè)setInterval的臨時(shí)變量
/**
* 
* 初始化 scrollTT 函數(shù)
* 主要是像對(duì)象添加事件
*
*/
init : function( obj, tTSpeed, startFlyTime, restartTime, flySpeed ) {
scrollTT.tTSpeed = scrollTT.tTSpeed || tTSpeed;
scrollTT.startFlyTIme = scrollTT.startFlyTIme || startFlyTime;
scrollTT.restartTime = scrollTT.restartTime || restartTime;
scrollTT.flySpeed = scrollTT.flySpeed || flySpeed;
scrollTT.obj = scrollTT.obj || obj;

// 向window 綁定scroll 事件
scrollTT.onScroll();


scrollTT.obj.click(function(){
// 關(guān)閉默認(rèn)的scroll事件
$(window).off("scroll");
// 頁(yè)面向上滾動(dòng)
$('html,body').animate({scrollTop: '0px'}, this.tTSpeed);
// 火箭向上飛行
scrollTT.objFly();
// 火箭的噴氣效果
scrollTT.blow();

});

// 鼠標(biāo)在火箭上的效果
scrollTT.obj.mouseenter(function() {
$(this).css('background-position', '-149px 0px');
});
// 鼠標(biāo)移開(kāi)的效果
scrollTT.obj.mouseleave(function() {
$(this).css('background-position', '0px 0px');
});

}, 
/*
* 向window 綁定scroll 事件
*
*/
onScroll : function() {
$(window).on('scroll', function() {
if ($(window).scrollTop()>500){
scrollTT.obj.fadeIn(500);
}else{
scrollTT.obj.fadeOut(1500);
}
});
},
/**
* dom對(duì)象向上飛行
*
*/
objFly : function() {
var fly = setTimeout(function(){
scrollTT.obj.animate({top: '-500px'} ,'normal', 'swing');
scrollTT.resetFly();
clearTimeout(fly);
clearInterval(scrollTT.flyTemp);
}, scrollTT.startFlyTime);
},
/**
* dom 對(duì)象飛行完畢回到原來(lái)的位置
*
*/
resetFly : function() {
var fly2 = setTimeout(function() {
scrollTT.obj.hide();
scrollTT.obj.css("top", 'auto');
scrollTT.obj.css("background-position", '0px 0px');
scrollTT.onScroll();
clearTimeout(fly2);
},scrollTT.restartTime);
},
/**
* dom 對(duì)象的噴氣效果
*
*/
blow : function() {
var topPosiiton = -149;
scrollTT.flyTemp = setInterval(function() {
topPosiiton += -149;
if(topPosiiton < -743) {
topPosiiton = -149
}
scrollTT.obj.css('background-position', topPosiiton + 'px 0px');
}, this.flySpeed);
}
};

scrollTT.init();

希望我們網(wǎng)站（ https://www.wordpressx.com/ ） 分享的《設(shè)置單擊火箭圖標(biāo)jquery滾動(dòng)返回到頂部JS代碼效果》，對(duì)您有幫助。