Mete efè klike sou ikòn fize jquery woulo liv la tounen nan kòd JS anwo a

pataje kijanWordPressAplike efè "klike fize a pou retounen nan tèt la" nan tèm nan.

• Si ou se yon sifle WordPress, ou konnen ki jan yo pò li nan yon tèm WordPress.
• Atik sa a tou adaptebati yon sit entènètdebutan.

Wòkèt Ascent Retounen nan Top Foto

Telechaje imaj ki anwo a davans, li rekòmande pou mete l nan katab imaj la anba anyè tèm.

Etap 1: Chaje dosye bibliyotèk jQuery yo

• Chaje dosye bibliyotèk jQuery a, si tèm WordPress la deja chaje, ou ka inyore etap sa a;

WordPress prezante bibliyotèk jQuery twazyèm pati, tanpri tcheke leson patikilye sa a ▼

Ki jan yo telechaje bibliyotèk jQuery la? WordPress prezante bibliyotèk jQuery twazyèm pati

WordPress vini ak bibliyotèk jQuery, men pwòp bibliyotèk jQuery li yo yon ti kras modifye.Si ou aprann sèvi ak li, ou ka pa kapab reyalize kèk efè jQuery.Yon bibliyotèk jQuery se nòmalman 50-90 ko gwo, si hôte ou a pa trè performant, Lè sa a, sit entènèt ou a chaje...  

Etap 2: Ajoute kòd nan dosye footer.php

Ajoute kòd sa a nan kote ki koresponn lan nan tèm footer.php ▼

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

Etap 3: Ajoute kòd nan dosye CSS

Ajoute kòd CSS sa a nan dosye style.css tèm nan ▼

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

Etap 4: Ajoute tounen nan tèt kòd JS

Pou kòd js sa a, ou ka kreye yon lòt dosye js;

oswa rantre li nan dosye a js ki enpòtan nan yon tèm ki egziste deja (rekòmande);

oswa ou ka vlope li nan footer.php Mwayen ▼

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