Setel efek ngeklik lambang roket jquery gulung bali menyang kode JS ndhuwur

nuduhake caraneWordPressNgleksanakake efek "ngklik roket kanggo bali menyang ndhuwur" ing tema.

• Yen sampeyan ahli WordPress, sampeyan ngerti carane port menyang tema WordPress.
• Artikel iki uga cocogmbangun situs webpamula.

Rocket Ascent Back to Top Gambar

Download gambar ing ndhuwur luwih dhisik, disaranake dilebokake ing folder gambar ing direktori tema.

Langkah 1: Muat file perpustakaan jQuery

• Muat file perpustakaan jQuery, yen tema WordPress wis dimuat, sampeyan bisa nglirwakake langkah iki;

WordPress ngenalake perpustakaan jQuery pihak katelu, priksa tutorial iki ▼

Kepiye carane ndownload perpustakaan jQuery? WordPress ngenalake perpustakaan jQuery pihak katelu

WordPress dilengkapi perpustakaan jQuery, nanging perpustakaan jQuery dhewe rada diowahi.Yen sampeyan sinau nggunakake, sampeyan bisa uga ora bisa entuk sawetara efek jQuery.Pustaka jQuery biasane 50-90kb gedhe, yen host sampeyan ora performa banget, mula situs web sampeyan mbukak ...

Langkah 2: Tambah kode menyang file footer.php

Tambah kode ing ngisor iki menyang lokasi sing cocog ing footer tema.php ▼

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

Langkah 3: Tambah Kode menyang File CSS

Tambah kode CSS ing ngisor iki menyang file style.css 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;}

Langkah 4: Tambah maneh menyang kode JS ndhuwur

Kanggo kode js ing ngisor iki, sampeyan bisa nggawe file js liyane;

utawa gabungke menyang file js sing relevan saka tema sing wis ana (disaranake);

utawa sampeyan bisa mbungkus ing footer.php Sedheng ▼

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