Establezca el efecto de hacer clic en el ícono del cohete jquery desplácese hacia atrás hasta el código JS superior

Comparte cómoWordPressImplemente el efecto de "hacer clic en el cohete para volver a la parte superior" en el tema.

• Si eres un genio de WordPress, sabes cómo migrarlo a un tema de WordPress.
• Este artículo también encajaconstruir un sitio webprincipiante.

Rocket Ascensión Volver a la imagen superior

Descargue la imagen de arriba con anticipación, se recomienda colocarla en la carpeta de imágenes en el directorio de temas.

Paso 1: Cargue los archivos de la biblioteca jQuery

• Cargue el archivo de la biblioteca jQuery, si el tema de WordPress ya está cargado, puede ignorar este paso;

WordPress presenta una biblioteca jQuery de terceros, consulte este tutorial ▼

¿Cómo descargar la biblioteca jQuery? WordPress presenta una biblioteca jQuery de terceros

WordPress viene con la biblioteca jQuery, pero su propia biblioteca jQuery está ligeramente modificada.Si aprende a usarlo, es posible que no pueda lograr algunos efectos de jQuery.Una biblioteca jQuery suele tener un tamaño de 50-90 kb, si su host no tiene un gran rendimiento, entonces su sitio web se carga...

Paso 2: Agregar código al archivo footer.php

Agrega el siguiente código a la ubicación correspondiente en el tema footer.php ▼

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

Paso 3: Agregar código al archivo CSS

Agrega el siguiente código CSS al archivo 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;}

Paso 4: Agregar de nuevo al código JS superior

Para el siguiente código js, ​​puede crear otro archivo js;

o fusionarlo en el archivo js relevante de un tema existente (recomendado);

o puedes envolverlo en 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();