Setzt den Effekt vum Klick op d'Rakéit Ikon jquery scroll zréck op den Top JS Code

deelen wéiWordPressImplementéiert den Effekt vum "klickt op d'Rakéit fir zréck op d'Spëtzt" am Thema.

• Wann Dir e WordPress Whiz sidd, wësst Dir wéi Dir et an e WordPress Thema portéiert.
• Dësen Artikel passt ocheng Websäit bauenUfänger.

Rocket Ascent Zréck op Top Bild

Luet dat uewe genannte Bild am Viraus erof, et ass recommandéiert et an de Biller Dossier ënner dem Thema Verzeechnes ze setzen.

Schrëtt 1: Lued d'jQuery Bibliothéik Dateien

• Lued d'jQuery Bibliothéik Datei, wann d'WordPress Thema scho gelueden ass, kënnt Dir dëse Schrëtt ignoréieren;

WordPress stellt Drëtt Partei jQuery Bibliothéik vir, kuckt w.e.g. dësen Tutorial ▼

🔗Wéi luet ech jQuery Bibliothéik erof? WordPress stellt Drëtt Partei jQuery Bibliothéik vir

Schrëtt 2: Füügt Code op footer.php Datei

Füügt de folgende Code op déi entspriechend Plaz am Thema footer.php ▼

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

Schrëtt 3: Add Code zu CSS Datei

Füügt de folgenden CSS Code an d'Thema style.css Datei ▼

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

Schrëtt 4: Füügt zréck op Top JS Code

Fir de folgende js Code kënnt Dir eng aner js Datei erstellen;

oder fusionéiere se an déi entspriechend js Datei vun engem existente Thema (recommandéiert);

oder Dir kënnt et an footer.php wéckelen Mëttelméisseg ▼

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();