Stel it effekt fan it klikken op it raketbyldkaike jquery rôlje werom nei de top JS-koade

Dit artikel leit út hoe't jo it effekt "klik op de raket om werom te gean nei de boppekant" ymplementearje kinne yn in WordPress- tema.

• As jo ​​​​in WordPress-whiz binne, wite jo hoe't jo it kinne portearje nei in WordPress-tema.
• Dit artikel past ekbouwe in websidebegjinner.

Rocket Ascent Werom nei Top Picture

Download de boppesteande ôfbylding fan tefoaren, it is oan te rieden om it yn 'e ôfbyldingsmap te pleatsen ûnder de temamap.

Stap 1: Laad de jQuery-biblioteekbestannen

• Laad de jQuery-bibleteekbestân, as it WordPress-tema al laden is, kinne jo dizze stap negearje;

WordPress yntrodusearret 3rd party jQuery bibleteek, kontrolearje asjebleaft dit tutorial ▼

🔗Hoe kinne jo jQuery-biblioteek downloade? WordPress yntroduseart jQuery-bibleteek fan tredden

Stap 2: Foegje koade ta oan footer.php-bestân

Foegje de folgjende koade ta oan de oerienkommende lokaasje yn it tema footer.php ▼

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

Stap 3: Koade tafoegje oan CSS-bestân

Foegje de folgjende CSS-koade ta oan it style.css-bestân fan it tema ▼

.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;}

Stap 4: Foegje werom nei boppe JS-koade

Foar de folgjende js-koade kinne jo in oare js-bestân oanmeitsje;

of fusearje it yn it oanbelangjende js-bestân fan in besteand tema (oanrikkemandearre);

of jo kinne it yn footer.php ferpakke Medium ▼

var scrollTT = {
tTSpeed : 800, // 滚动到顶部的时间
startFlyTime : 1000, // 火箭起飞的时间
restartTime : 1200, // 重置火箭位置的时间
flySpeed : 50, // 火箭向上飞行的速度
obj : $("#backtotop"), // 回到顶部的dom
flyTemp : '', // 一个setInterval的临时变量
/**
* 
* 初始化 scrollTT 函数
* 主要是像对象添加事件
*
*/
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(){
// 关闭默认的scroll事件
$(window).off("scroll");
// 页面向上滚动
$('html,body').animate({scrollTop: '0px'}, this.tTSpeed);
// 火箭向上飞行
scrollTT.objFly();
// 火箭的喷气效果
scrollTT.blow();

});

// 鼠标在火箭上的效果
scrollTT.obj.mouseenter(function() {
$(this).css('background-position', '-149px 0px');
});
// 鼠标移开的效果
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对象向上飞行
*
*/
objFly : function() {
var fly = setTimeout(function(){
scrollTT.obj.animate({top: '-500px'} ,'normal', 'swing');
scrollTT.resetFly();
clearTimeout(fly);
clearInterval(scrollTT.flyTemp);
}, scrollTT.startFlyTime);
},
/**
* dom 对象飞行完毕回到原来的位置
*
*/
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 对象的喷气效果
*
*/
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();