راکٹ آئیکن پر کلک کرنے کا اثر سیٹ کریں jquery اسکرول واپس اوپر JS کوڈ پر جائیں۔

کس طرح اشتراک کریںWordPressتھیم میں "راکٹ کو اوپر واپس کرنے کے لیے کلک کریں" کے اثر کو نافذ کریں۔

• اگر آپ ورڈپریس وِز ہیں، تو آپ جانتے ہیں کہ اسے ورڈپریس تھیم پر کیسے پورٹ کرنا ہے۔
• یہ مضمون بھی فٹ بیٹھتا ہے۔ایک اسٹیشن بنائیںشروع.

راکٹ ایسنٹ واپس اوپر کی تصویر پر

مندرجہ بالا تصویر کو پہلے سے ڈاؤن لوڈ کریں، اسے تھیم ڈائرکٹری کے تحت امیجز فولڈر میں ڈالنے کی سفارش کی جاتی ہے۔

مرحلہ 1: jQuery لائبریری فائلوں کو لوڈ کریں۔

• jQuery لائبریری فائل لوڈ کریں، اگر ورڈپریس تھیم پہلے سے لوڈ ہے، تو آپ اس قدم کو نظر انداز کر سکتے ہیں۔

ورڈپریس نے 3rd پارٹی jQuery لائبریری متعارف کرائی ہے، براہ کرم اس ٹیوٹوریل کو دیکھیں ▼

jQuery لائبریری کو کیسے ڈاؤن لوڈ کیا جائے؟ ورڈپریس نے تھرڈ پارٹی jQuery لائبریری متعارف کرائی ہے۔

مرحلہ 2: footer.php فائل میں کوڈ شامل کریں۔

تھیم 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 فائل میں ضم کریں (تجویز کردہ)؛

یا آپ اسے 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();