Legen Sie den Effekt fest, wenn Sie auf das Raketensymbol klicken. Jquery scrollen Sie zurück zum oberen JS-Code

Teile wieWordPressImplementieren Sie den Effekt "Klicken Sie auf die Rakete, um zum Anfang zurückzukehren" im Design.

• Wenn Sie ein WordPress-Experte sind, wissen Sie, wie man es auf ein WordPress-Theme portiert.
• Dieser Artikel passt aucheine Webseite bauenAnfänger.

Raketenaufstieg Zurück zum oberen Bild

Laden Sie das obige Bild im Voraus herunter, es wird empfohlen, es in den Bilderordner unter dem Themenverzeichnis zu legen.

Schritt 1: Laden Sie die jQuery-Bibliotheksdateien

• Laden Sie die jQuery-Bibliotheksdatei, wenn das WordPress-Design bereits geladen ist, können Sie diesen Schritt ignorieren;

WordPress führt die jQuery-Bibliothek von Drittanbietern ein, bitte überprüfen Sie dieses Tutorial ▼

Wie lade ich die jQuery-Bibliothek herunter? WordPress führt die jQuery-Bibliothek von Drittanbietern ein

WordPress wird mit der jQuery-Bibliothek geliefert, aber seine eigene jQuery-Bibliothek ist leicht modifiziert.Wenn Sie lernen, es zu verwenden, können Sie einige jQuery-Effekte möglicherweise nicht erzielen.Eine jQuery-Bibliothek ist normalerweise 50-90kb groß, wenn Ihr Host nicht sehr performant ist, dann lädt Ihre Website ...

Schritt 2: Code zur Datei footer.php hinzufügen

Fügen Sie den folgenden Code an der entsprechenden Stelle im Theme footer.php hinzu ▼

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

Schritt 3: Code zur CSS-Datei hinzufügen

Fügen Sie den folgenden CSS-Code zur style.css-Datei des Designs hinzu ▼

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

Schritt 4: Fügen Sie den JS-Code zum Anfang hinzu

Für den folgenden js-Code können Sie eine weitere js-Datei erstellen;

oder fügen Sie es in die entsprechende js-Datei eines vorhandenen Designs ein (empfohlen);

oder Sie können es in footer.php einpacken Mittel ▼

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