שטעלן די ווירקונג פון געבן אַ קליק אויף די ראַקעט ייקאַן דזשקווערי מעגילע צוריק צו די שפּיץ JS קאָד

דיזער אַרטיקל דערקלערט ווי אַזוי צו ימפּלעמענטירן דעם "דריקט די ראַקעט צו צוריקקומען צום שפּיץ" ווירקונג אין אַ וואָרדפּרעס טעמע.

• אויב איר זענט אַ וואָרדפּרעסס וויז, איר וויסן ווי צו אַריבערפירן עס צו אַ וואָרדפּרעסס טעמע.
• דער אַרטיקל איז אויך פּאַסיקבויען אַ וועבזייטלאָנהייבער.

ראַקעט אַסענט צוריק צו שפּיץ בילד

אראפקאפיע די אויבן בילד אין שטייַגן, עס איז רעקאַמענדיד צו שטעלן עס אין די בילד טעקע אונטער די טעמע וועגווייַזער.

שריט 1: לאָדן די jQuery ביבליאָטעק טעקעס

• לאָדן די דזשקווערי ביבליאָטעק טעקע, אויב די וואָרדפּרעסס טעמע איז שוין לאָודיד, איר קענען איגנאָרירן דעם שריט;

וואָרדפּרעסס ינטראַדוסיז 3rd פּאַרטיי דזשקווערי ביבליאָטעק, ביטע טשעק דעם טוטאָריאַל ▼

🔗ווי צו אָפּלאָדירן jQuery ביבליאָטעק? וואָרדפּרעסס ינטראַדוסיז 3rd פּאַרטיי דזשקווערי ביבליאָטעק

שריט קסנומקס: לייג קאָד צו פאָאָטער.פפּ טעקע

לייג די פאלגענדע קאָד צו די קאָראַספּאַנדינג אָרט אין די טעמע footer.php ▼

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

שריט 3: לייג קאָד צו 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();