Native JS implementiert eine reibungslose Rückkehr zu den besten Komponenten-Javascript-Kenntnissen

Die Komponente „Zurück zum Anfang“ ist eine äußerst häufige Funktion einer Webseite mit einer einfachen Anforderung: Nachdem die Seite um eine bestimmte Distanz gescrollt wurde, wird eine Schaltfläche „Zurück zum Anfang“ angezeigt. Durch Klicken auf diese Schaltfläche kann die Bildlaufleiste zurück zum Anfang der Seite gescrollt werden Seite.

Die Implementierungsidee ist ebenfalls sehr einfach. Ändern Sie einfach den Wert von document.documentElement.scrollTop oder document.body.scrollTop.

Dieser Artikel verzichtet auf alle coolen Effekte der Beschleunigung und Verzögerung, kehrt zum Wesen der Software zurück und bietet die einfachste Implementierung. Er verfolgt nur die Praktikabilität und verfolgt nicht die sogenannte Benutzererfahrung. Der Effekt ist wie folgt >

Da die Idee und der Code sehr einfach sind, werde ich die Implementierungsdetails direkt veröffentlichen:

var BackTop = function (domE,distance) {
if (!domE) return;
var _onscroll = window.onscroll,
_onclick = domE.onclick;
window.onscroll = throttle(function(){
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
},100);
domE.onclick = function(){
typeof _onclick === 'function' && _onclick.apply(this, arguments);
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
function toggleDomE(){
domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
}
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
}; 

Aufrufmethode:

<script>
new BackTop(document.getElementById('backTop'))
</script> 

Der Grund, warum ich diesen Blog geschrieben und so etwas Einfaches gemacht habe, sind zwei Gründe:

1) Ich habe in dieser Zeit einige gängige einfache Komponenten von Hand geschrieben. Um diese Blogserie zu vervollständigen, habe ich diese Komponente hinzugefügt

2) Ich möchte eine meiner Ansichten im Arbeitsprozess zum Ausdruck bringen: Verwenden Sie die Benutzererfahrung nicht, um Ihre Software oder Produkte zu dekorieren. Um es ganz klar auszudrücken: Die Benutzererfahrung kann in zwei Wörter unterteilt werden: Das eine ist ein guter Eindruck. und das andere ist ein guter Eindruck, aber das ist nicht das ultimative Ziel der Produktentwicklung und des Betriebs. Egal wie schön Sie Dinge herstellen, wenn der Kernwert und der Service des Produkts nicht ausreichen Die Funktion, in einer superunbesiegbaren Rakete nach oben zurückzukehren, wird vergeblich sein. Bei der Front-End-Entwicklung müssen Sie eine gewisse Kontrolle darüber ausüben, inwieweit der Produktmanager die Benutzererfahrungsfunktionen blind erwähnt. Ich halte es für überflüssig, Beschleunigungs- oder Verzögerungseffekte zu erzielen. Dies erhöht nicht nur die Entwicklungszeit. aber es verzögert auch die Zeit der Benutzer und gibt sich selbst auf. Die Sturheit beim Spielen mit der Technologie kann Ihre Arbeit perfekter machen.

Lassen Sie mich einige gängige Webseiten-Return-to-Top-Codes mit Ihnen teilen

1. Am einfachsten ist es, HTML-Ankertags zu verwenden Aber der einzige Nachteil ist, dass der Stil nicht sehr gut ist und dieses Ankertag angezeigt wird.

Code kopieren Der Code lautet wie folgt:

248880eee67e49e055bb813031cf47af5db79b134e9f6b82c0b36e0489ee08ed

Sie können es an einer beliebigen Stelle nach dem 6c04bd5ca3fcae76e30b72ad730ca86d-Tag platzieren, solange es sich weit oben befindet.

Am Ende der Seite platzieren:

Code kopieren Der Code lautet wie folgt:

3084c989cc3fc7888f5bec97780f1351Zurück nach oben5db79b134e9f6b82c0b36e0489ee08ed

2. Verwenden Sie die Javascript-Scroll-Funktion, um zum Anfang zurückzukehren Die Scroll-Funktion wird verwendet, um die Position der Scroll-Leiste zu steuern. Es gibt zwei sehr einfache Implementierungsmethoden:

Methode 1 (empfohlen: einfach und bequem):

Code kopieren Der Code lautet wie folgt:

6ef0781b13415735db0500a4e94ca4b1Zurück nach oben5db79b134e9f6b82c0b36e0489ee08ed

Der erste Parameter des Scrollens ist die horizontale Position und der zweite Parameter ist die vertikale Position. Wenn Sie ihn beispielsweise vertikal bei 50 Pixeln positionieren möchten, ändern Sie ihn einfach in scroll(0,50).

Methode 2 (Fokus auf Wirkung: langsam nach oben):

Diese Methode ist eine schrittweise Rückkehr nach oben, die besser aussehen sollte. Der Code lautet wie folgt:

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

Dies kehrt dynamisch zum Anfang zurück, aber obwohl es zum Anfang zurückkehrt, wird der Code noch ausgeführt und Sie müssen der pageScroll-Funktion einen Satz hinzufügen, um ihn zu stoppen.

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

3. Verwenden Sie Onload plus Scroll-Funktion, um dynamisch zum Anfang zurückzukehren Fügen Sie zunächst Folgendes hinzu:

vor dem Ende des Body-Tags der Webseite

<divid="gotop">返回顶部</div>

2. Rufen Sie dann den folgenden JS-Skriptteil auf:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

Diese können auf einer Webseite platziert oder unabhängig als js-Datei, z. B. gotop.js, und dann in der folgenden Form gespeichert werden:

<scriptsrc="/js/gotop.js"type=text/javascript></script>

Zum Aufrufen ist es natürlich am besten, es unter der Bezeichnung „Zurück zum Anfang“ zu platzieren. Bei dieser Aufrufmethode wird davon ausgegangen, dass der Dateipfad JS ist. Bitte ändern Sie ihn entsprechend der tatsächlichen Situation.