Поставете го ефектот на кликнување на иконата на ракетата jquery движете се назад до горниот JS код

споделете какоWordPressПрименете го ефектот на „кликнување на ракетата за да се вратите на врвот“ во темата.

• Ако сте љубител на WordPress, знаете како да го пренесете на тема на WordPress.
• Оваа статија исто така одговараизгради веб-локацијапочетник.

Ракетно искачување Назад кон врвот Слика

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

Чекор 1: Вчитајте ги датотеките од библиотеката jQuery

• Вчитајте ја датотеката со библиотека jQuery, ако темата на WordPress е веќе вчитана, можете да го игнорирате овој чекор;

WordPress воведува jQuery библиотека од трета страна, проверете го ова упатство ▼

Како да ја преземете библиотеката jQuery? WordPress воведува jQuery библиотека од трета страна

WordPress доаѓа со библиотеката jQuery, но неговата сопствена библиотека jQuery е малку изменета.Ако научите да го користите, можеби нема да можете да постигнете некои jQuery ефекти.Библиотеката jQuery е обично голема од 50-90 kb, ако вашиот домаќин не е многу изведен, тогаш вашата веб-страница се вчитува...

Чекор 2: Додајте код во датотеката footer.php

Додадете го следниов код на соодветната локација во подножјето на темата.php ▼

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

Чекор 3: Додајте код во датотеката CSS

Додадете го следниов CSS код во датотеката style.css на темата ▼

.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: Додајте назад на врвот JS код

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

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

или можете да го завиткате во футер.php Средно ▼

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