Подесите ефекат клика на икону ракете јкуери скролујте назад на горњи ЈС код

прошири какоWordPressИмплементирајте ефекат „кликом на ракету да бисте се вратили на врх“ у тему.

• Ако сте чаробњак за ВордПресс, знате како да га пренесете на ВордПресс тему.
• Овај чланак такође одговаранаправите веб страницупочетник.

Роцкет Асцент Повратак на врх слике

Преузмите горњу слику унапред, препоручљиво је да је ставите у фасциклу слика испод директоријума тема.

Корак 1: Учитајте датотеке јКуери библиотеке

• Учитајте датотеку библиотеке јКуери, ако је ВордПресс тема већ учитана, можете занемарити овај корак;

ВордПресс представља јКуери библиотеку треће стране, погледајте овај водич ▼

Како преузети јКуери библиотеку? ВордПресс представља јКуери библиотеку треће стране

ВордПресс долази са јКуери библиотеком, али је сопствена јКуери библиотека мало измењена.Ако научите да га користите, можда нећете моћи да постигнете неке јКуери ефекте.ЈКуери библиотека је обично велика 50-90 кб, ако ваш хост није врло ефикасан, онда се ваша веб локација учитава...

Корак 2: Додајте код у фоотер.пхп датотеку

Додајте следећи код на одговарајућу локацију у фоотер.пхп теме ▼

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

Корак 3: Додајте код у ЦСС датотеку

Додајте следећи ЦСС код у датотеку стиле.цсс теме ▼

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

Корак 4: Додајте назад на врх ЈС кода

За следећи јс код, можете креирати другу јс датотеку;

или га спојите у релевантну јс датотеку постојеће теме (препоручено);

или га можете умотати у фоотер.пхп Средње ▼

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