JavaScript kehrt einfach zum obersten Code und den Kommentaren zurück

Um den Benutzern ein besseres Erlebnis zu bieten, werden unsere Seiten in unserem täglichen Entwicklungsprozess über eine Return-to-Top-Funktion verfügen. Die häufigste ist die Verwendung von JavaScript, um den Return-to-Top-Code zu implementieren. Lassen Sie mich heute JavaScript im Detail vorstellen Zurück zum oberen Code und Kommentaren!

Ich habe kürzlich eine Ranking-Seite mit vielen Kategorien erstellt und diese in Form von Bildern und Text angezeigt ... Am Ende war die Seite offensichtlich zu lang und die Benutzererfahrung war natürlich nicht gut genug. Schließlich habe ich darüber nachgedacht, im oberen Teil der Seite eine In-Page-Sprungnavigation hinzuzufügen, um direkt zum Kategoriebenennungs-Ankerblock dieser Seite zu navigieren. Dies muss natürlich mit der Funktion „Zurück zum Anfang“ kombiniert werden, um ein besseres Erlebnis zu erzielen. Unter normalen Umständen müssen Sie natürlich zunächst zu lange Seiten meiden. Wenn der Inhalt schwach und nicht relevant genug ist, ist die Absprungrate sehr hoch.

Das Folgende ist eine einfache Codeimplementierung des Return-to-Top-Effekts mit Kommentaren.

1. Die einfachste statische Rückkehr zum Anfang: Klicken Sie, um direkt zum Anfang der Seite zu springen, üblich bei fester Platzierung am Ende der Seite, Rückkehr zum Anfangsfunktion

Methode 1: Benannte Anker verwenden Klicken Sie, um zum obersten Element mit der Standard-ID des oberen

HTML-Codes zurückzukehren

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

Methode 2 : Betätigen Sie die Bildlauffunktion, um die Position der Bildlaufleiste zu steuern (der erste Parameter ist die horizontale Position, der zweite Parameter ist die vertikale Position)

HTML-Code

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

Nachteile:Der Rückkehreffekt tritt sofort ein und entspricht nicht dem Bildlaufgefühl allgemeiner Browsing-Seiten.

ist statisch am Ende der Seite fixiert und möglicherweise nicht für Benutzer sichtbar sein.

2. Einfache statische Rückkehr nach oben, mit js den Scrolleffekt simulieren und nach oben schieben

js-Code

 pageScroll(){
    window.scrollBy(0,-100);
    scrolldelay = setTimeout('pageScroll()',100);
     sTop=document.documentElement.scrollTop+document.body.scrollTop;
    (sTop==0) clearTimeout(scrolldelay);
}

HTML-Code

<a onclick="pageScroll()">返回顶部</a>

Nachteile: Der Scrolleffekt ist nicht flüssig, und wenn die Seite sehr lang ist, klicken Sie, um zum Anfang zurückzukehren Wenn Sie nicht den oberen Rand der Seite erreichen, können Sie die Seite nicht mehr normal durchsuchen.

Wie oben ist es immer noch statisch am unteren Rand der Seite fixiert und möglicherweise nicht für Benutzer sichtbar.

3. Dynamisches On-Demand-Laden zurück nach oben, CSS-Seitenbildschirm absolute Positionierung, kombiniert mit einfacher jQuery-Animation, um ein besseres Erlebnis zu erzielen

js Code

 gotoTop(min_height){
     gotoTop_html = &#39;<p id="gotoTop">返回顶部</p>&#39;;
    $("#page").append(gotoTop_html);
    $("#gotoTop").click(
(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
    }).hover(        (){$().addClass("hover");},
(){$().removeClass("hover");
    });
    min_height ? min_height = min_height : min_height = 600;
    $(window).scroll((){
         s = $(window).scrollTop();
        ( s > min_height){
            $("#gotoTop").fadeIn(100);
        }{
            $("#gotoTop").fadeOut(200);
        };
    });
};
gotoTop();

CSS-Stilcode

{:;:;:75;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}

Diese Methode bestimmt die Höhe der Seite und zeigt dem Benutzer „Zurück zum Anfang“ als an Wird benötigt und verwendet den CSS-Stil, um den Bildschirm zu implementieren. Absolute Positionierung unter Verwendung von jQuery, um einen besseren und reibungsloseren Bildlaufeffekt zu erzielen. Eine weitere Überlegung ist, dass wir, wenn der Benutzer den Browser so einstellt, dass er js deaktiviert, die dritte Lösung mit der ersten Lösung kombinieren können. Nach dem Deaktivieren von js ist die dritte Lösung für den Benutzer nicht sichtbar Ein Satz im JS-Code. Verstecke die erste Option.

Zusammenfassung:

Kurz gesagt, lange Seiten sollten so weit wie möglich vermieden werden, indem die Funktion „Zurück zum Anfang“ hinzugefügt wird Mai Es wird den Benutzern ein relativ besseres Erlebnis bieten. Ich hoffe, es wird Ihnen helfen!

Verwandte Empfehlungen:

Beispiel für die JavaScript-Implementierung des Return-to-Top-Effekts

javascript – So stellen Sie sicher, dass der Inhalt des Iframes außerhalb des Iframes wieder an die Spitze zurückkehrt

JS implementiert Back-to-Top-Spezialeffekte

Das obige ist der detaillierte Inhalt vonJavaScript kehrt einfach zum obersten Code und den Kommentaren zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!