Imposta l'effetto del clic sull'icona del razzo jquery torna al codice JS in alto

condividi comeWordPressImplementa l'effetto di "fare clic sul razzo per tornare in alto" nel tema.

• Se sei un mago di WordPress, sai come portarlo su un tema WordPress.
• Anche questo articolo si adattacostruire un sito webprincipiante.

Ascesa del razzo Torna all'immagine in alto

Scarica l'immagine sopra in anticipo, si consiglia di inserirla nella cartella delle immagini nella directory del tema.

Passaggio 1: carica i file della libreria jQuery

• Carica il file della libreria jQuery, se il tema WordPress è già caricato, puoi ignorare questo passaggio;

WordPress introduce la libreria jQuery di terze parti, controlla questo tutorial ▼

Come scaricare la libreria jQuery? WordPress introduce la libreria jQuery di terze parti

WordPress viene fornito con la libreria jQuery, ma la sua libreria jQuery è leggermente modificata.Se impari ad usarlo, potresti non essere in grado di ottenere alcuni effetti jQuery.Una libreria jQuery è solitamente grande 50-90kb, se il tuo host non è molto performante, il tuo sito web viene caricato...  

Passaggio 2: aggiungi il codice al file footer.php

Aggiungi il seguente codice alla posizione corrispondente nel tema footer.php ▼

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

Passaggio 3: aggiungi codice al file CSS

Aggiungi il seguente codice CSS al file style.css del 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;}

Passaggio 4: aggiungi il codice JS in alto

Per il seguente codice js, puoi creare un altro file js;

oppure uniscilo nel file js pertinente di un tema esistente (consigliato);

oppure puoi avvolgerlo in footer.php Medio ▼

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