Socraigh éifeacht chliceáil ar an deilbhín roicéad jquery scrollaigh ar ais go dtí an cód JS barr

Roinn conas aWordPressCuireann an téama an "éifeacht cliceáil ar an roicéad chun filleadh ar an mbarr".

• Más gúrú WordPress thú, tá a fhios agat conas é a aistriú chuig téama WordPress.
• Tá an t-alt seo oiriúnach freisinláithreán gréasáin a thógáiltosaitheoir.

Ascent Roicéid Fill ar ais go Pictiúr Barr

Íoslódáil an íomhá thuas roimh ré, moltar é a chur san fhillteán íomhánna faoin eolaire téamaí.

Céim 1: Luchtaigh comhaid leabharlainne jQuery

• Luchtaigh an comhad leabharlainne jQuery. Má tá an téama WordPress luchtaithe cheana féin, is féidir leat neamhaird a dhéanamh den chéim seo;

Tugann WordPress leabharlann jQuery tríú páirtí isteach, seiceáil an teagasc seo ▼

Conas a íoslódáil jquery leabharlann. Tugann WordPress leabharlann jQuery 3ú páirtí isteach

Seoltar WordPress leis an leabharlann jQuery, ach tá a leabharlann jQuery féin mionathraithe aige. Má fhoghlaimíonn tú é a úsáid agus suíomh Gréasáin á thógáil agat, b’fhéidir nach mbeidh tú in ann roinnt éifeachtaí jQuery a bhaint amach. Is gnách go mbíonn leabharlann jQuery 50-90kb mór. Mura bhfuil d’óstach an-feidhmitheach, ansin lódálfaidh do shuíomh Gréasáin...

Céim 2: Cuir cód leis an gcomhad footer.php

Cuir an cód seo a leanas leis an suíomh cuí i do théama footer.php ▼

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

Céim 3: Cuir cód le comhad CSS

Cuir an cód CSS seo a leanas le comhad style.css do théama ▼

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

Céim 4: Cuir filleadh ar an gcód JS barr

Maidir leis an gcód js seo a leanas, is féidir leat comhad js eile a chruthú;

Nó é a chumasc isteach sa chomhad js ábhartha den téama reatha (molta);

Nó is féidir leat é a wrap i footer.php Meánach ▼

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