Mehrere gängige Webseiten-Return-to-Top-Codes

Auf Websites kommt es häufig vor, dass man durch Klicken zum Kopf und durch Klicken zum nach oben zurückkehrt. Heute werden wir über diese besonders einfachen Klicks sprechen, um Code für den Header .

1. Es ist am einfachsten, HTML-Anker-Tags zu verwenden

Aber der einzige Nachteil ist, dass der Stil und dieser Anker nicht sehr gut sind Tag wird angezeigt.

<aname="top"id="top"></a>

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

Unten auf der Seite platzieren:

<ahref="#top"target="_self">返回顶部</a>

2. Javascript verwenden Scrollfunktion, 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):

<ahref="javascript:scroll(0,0)">返回顶部</a>

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

Methode 2 (Fokus auf den Effekt: langsam nach oben):

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

functionpageScroll(){window.scrollBy(0,-10);scrolldelay=setTimeout(&#39;pageScroll()&#39;,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 die Onload-Plus-Scroll-Funktion, um dynamisch zum Anfang zurückzukehren

1 Tag der Webseite Vorher hinzufügen:

<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 eingefügt werden die Webseite oder speichern Sie sie unabhängig als js-Datei, z. B. gotop.js, und rufen Sie sie dann in der folgenden Form auf:

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

Natürlich ist es am besten, sie unter „ zu platzieren. „Zurück zum Anfang“-Label. Diese aufrufende Methode geht davon aus, dass die Datei Der Pfad ist JS, bitte ändern Sie ihn entsprechend der tatsächlichen Situation, wenn er an anderen Orten platziert wird.

Die oben genannten sind einige häufig verwendete Webseiten

Zurück zum oberen Code, Sie können ihn selbst ändern und dann verwenden. Weitere Informationen finden Sie auf der PHP-Chinese-Website~

Verwandte Empfehlungen:

JavaScript einfache Rückkehr zum Top-Code und den Kommentaren

CSS-Zurück zum Anfang code_html/css_WEB-ITnose

Zurück zum Anfangscode für intelligente Versteck- und Schiebeeffekte, implementiert mit jQuery_jquery

Das obige ist der detaillierte Inhalt vonMehrere gängige Webseiten-Return-to-Top-Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!