JQuery пуужингийн дүрс дээр товших эффектийг тохируулж, дээд JS код руу буцна уу

хэрхэн хуваалцахWordPress"Дээд рүү буцахын тулд пуужин дээр дарах" эффектийг сэдэвт хэрэгжүүлээрэй.

• Хэрэв та WordPress-ийн зуучлагч бол үүнийг WordPress сэдэв рүү хэрхэн оруулахаа мэддэг.
• Энэ нийтлэл бас тохирновэб сайт байгуулахэхлэгч.

Пуужин хөөрөх дээд зураг руу буцах

Дээрх зургийг урьдчилан татаж авах тул сэдвийн лавлах дор байгаа зургийн хавтсанд оруулахыг зөвлөж байна.

Алхам 1: jQuery номын сангийн файлуудыг ачаална уу

• jQuery номын сангийн файлыг ачаална уу, хэрэв WordPress сэдэв аль хэдийн ачаалагдсан бол та энэ алхамыг үл тоомсорлож болно;

WordPress нь гуравдагч талын jQuery номын санг танилцуулж байна, энэ зааварчилгааг шалгана уу ▼

jQuery номын санг хэрхэн татаж авах вэ? WordPress нь гуравдагч талын jQuery номын санг танилцуулж байна

WordPress нь jQuery номын сантай хамт ирдэг боловч өөрийн jQuery номын сан нь бага зэрэг өөрчлөгдсөн.Хэрэв та үүнийг ашиглаж сурвал jQuery-ийн зарим эффектэд хүрч чадахгүй байж магадгүй юм.jQuery номын сан нь ихэвчлэн 50-90кб хэмжээтэй байдаг, хэрэв таны хост тийм ч сайн биш бол таны вэбсайт ачаалагдана...  

Алхам 2: footer.php файлд код нэмнэ үү

Дараах кодыг theme footer.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 файлд нэгтгэх (санал болгож байна);

эсвэл footer.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();