| 09.10.2014

Die Schaltfläche „Zurück zum Anfang“ wird sehr oft auf Websites verwendet, die viele lange Seiten haben. Wenn ein Benutzer, der sich einen großen Artikel, eine Bildergalerie, Nachrichten in sozialen Netzwerken usw. ansieht, zum Seitenanfang zurückkehren möchte, scrollt er entweder lange (was nicht sehr praktisch ist) oder drückt die Home-Taste auf der Tastatur oder über die spezielle Schaltfläche „Zurück nach oben“

Der Vorteil dieser Taste besteht darin, dass sie auf Tablets und Smartphones funktioniert, aber auch in allen anderen Fällen, in denen Sie keine Tastatur zur Hand haben. Darüber hinaus wissen möglicherweise nicht alle Benutzer um die nützliche Funktion der Home-Taste, aber die Schaltfläche ist immer auf der Website sichtbar, sodass Sie sofort erkennen können, wozu sie dient. Der zweite Pluspunkt besteht darin, dass diese Schaltfläche verbessert und so gestaltet werden kann, dass sie den Benutzer an die Stelle auf der Seite zurückführt, von der er an die Spitze gekommen ist. Es ist diese Version des Knopfes, die wir heute erstellen werden. Sie können die Demo ansehen und auch die Beispieldatei auf Ihren Computer herunterladen.

Der Teil des CSS, der sich mit dem Button-Styling befasst, sieht folgendermaßen aus:

InTop (Position: fest; links: 0px; oben: 0px; Breite: 20%; Höhe: 100%; Deckkraft: 0,5; Filter: Alpha(Deckkraft=50); Cursor: Zeiger; Anzeige: keine; ) .inTop:hover ( Hintergrundfarbe: #f5f4f4; Deckkraft: 1; Filter: Alpha( Deckkraft = 100); ) .inTop span ( Anzeige: Block; Breite: 100 %; Rand oben: 20 Pixel; Textausrichtung: Mitte; Schriftgröße : 110 %; Farbe: #52466a; Schriftfamilie: Georgia, Times;

Der nächste Schritt ist der JavaScript-Code. Der Einfachheit halber wurden darin Kommentare mit Erläuterungen hinzugefügt:

// Deklaration von Variablen: var BottomPosition = 0; // Seitenposition var BottomFlag = false; // Flag zum Anzeigen der Schaltfläche „GO TO BOTTOM“ var AnimateFlag = false;// Flag zum Ausführen der Animation $(document).ready(function() ( $(".inTop").click(function() ( // click on die Schaltfläche GO TO TOP/GO TO BOTTOM AnimateFlag = true; // Animation wird ausgeführt if(BottomFlag) ( // wenn die Schaltfläche GO TO BOTTOM gedrückt wird... $("body,html").animate(("scrollTop ":BottomPosition), 200, function() ( // ...kehrt mit einer Geschwindigkeit von 200 zur gewünschten Stelle auf der Seite zurück AnimateFlag = false; // die Animation ist beendet )); // den Button ersetzen $(" .inTop span").html ("GO TO TOP"); else ( // wenn die Schaltfläche GO TO TOP gedrückt wird... $("body,html").animate(("scrollTop":0), 200 , function() ( // ..kehrt mit einer Geschwindigkeit von 200 zum Anfang der Seite zurück AnimateFlag = false )); = true; // die Schaltfläche „GO TO BOTTOM“ anzeigen („.inTop span“).html(“GO TO BOTTOM“); // beim Scrollen der Seite prüfen: $(window).scroll(function(event) ( var countScroll = $(window).scrollTop (); if (countScroll > 200 && !AnimateFlag) ( // wenn der Benutzer mehr als 200 Pixel gescrollt hat... $(".inTop").show(); // ...den GO TO TOP-Button anzeigen if(BottomFlag ) ( BottomFlag = false; $(".inTop span").html("GO TO TOP"); else ( if(!BottomFlag) ( $(".inTop").hide(); // in anderen Fällen verstecken die Schaltfläche, es sei denn, es handelt sich um die Schaltfläche NACH UNTEN ) ) )); ));

Jetzt muss nur noch eine Schaltfläche in HTML erstellt werden:

ZUR SPITZE GEHEN

Das ist alles, ein einfacher, aber sehr praktischer „Zurück zum Anfang“-Button für die Site mit Zurück-Funktion ist fertig. Sie können den Stil selbst anpassen, sodass er zu Ihrer Website passt.

Wir wünschen Ihnen kreativen Erfolg und zufriedene Nutzer!

Eine Funktion wie eine „Nach oben“-Schaltfläche für eine Website macht die Internetressource für ihre Besucher komfortabler. Damit können Sie ganz einfach von einer beliebigen Stelle auf der Seite zum Seitenanfang wechseln. Dies ist ein Muss für Online-Shops und Websites mit großen Artikeln, die ein langes Scrollen nach unten erfordern.

Derzeit verfügen die meisten Websites nicht über eine Funktion wie den „Nach oben“-Button, und daran gibt es nichts Kritisches. Aber seine Nutzung kann sowohl für die Internetressource als auch für ihre Besucher viele Vorteile bringen.

Dies geschieht häufig, wenn die Seite einer Internetressource stark mit Informationen überladen ist, ein Informationsartikel viel Platz einnimmt und Sie mit dem Mausrad auf der Seite nach unten scrollen müssen. Darüber hinaus können am Ende des Artikels viele Kommentare dazu stehen.

Wenn ein Besucher einen Artikel liest, ist es nicht mühsam, auf der Seite nach unten zu scrollen, aber wenn der Text das Ende erreicht und man nach oben gehen muss, wird es etwas ermüdend. Die meisten Leute werden einfach zu faul sein, um lange zu scrollen, und sie werden die Seite einfach schließen, anstatt in der Weite herumzuwandern.

Wenn Sie eine Schaltfläche verwenden, um sofort zum Anfang der Seite zu gelangen, wird Ihre Zeit auf der Website komfortabler.

Die positiven Aspekte für die Ressource selbst ergeben sich aus früheren Faktoren, da die vereinfachte Navigation auf der Website die Verhaltensfaktoren verbessert, da alle Besucher bei ihren Aktionen aktiver sind und zu anderen Seiten wechseln.

Somit beeinflussen die Daten die Einstellung aller Suchmaschinen gegenüber der Website und führen zu einer Verbesserung ihrer Position in den Suchergebnissen.

• ein Bild erstellen;
• Erstellen eines Skripts;
• Erstellen eines Schaltflächenstils;
• Hinzufügen zur Website.

Um eine „Zurück zum Anfang“-Schaltfläche auf einer Website hinzuzufügen, müssen Sie zunächst das Symbol selbst erstellen, das den Benutzer beim Klicken an den Anfang der Seite bewegt. Dazu können Sie vorgefertigte Optionen nutzen, aus denen Sie immer die am besten geeignete auswählen können.

Um das Erscheinungsbild der Schaltfläche zu verbessern, müssen einige Verbesserungen vorgenommen werden, nämlich ein Sprite zu erstellen, mit dem Sie Hintergrundbilder basierend auf CSS kombinieren und so Animationen daraus erstellen können.

Für grafische Arbeiten können Sie jeden Editor verwenden. Am bequemsten wäre jedoch der Onlinedienst PIXLR, da Sie hier nichts herunterladen müssen und ihn direkt in Ihrem Browser nutzen können.

Um zu beginnen, müssen Sie im angezeigten Editorfenster das Feld „Bild vom Computer hochladen“ auswählen. Nehmen wir als Beispiel das Bild einer Rakete.

Wenn die Abmessungen des ausgewählten Symbols zu groß sind, müssen Sie eine kleine Größenanpassung vornehmen. Gehen Sie dazu in das obere Menü und wählen Sie das Feld „Bearbeiten“ und nach „Freie Transformation ...“

Als nächstes erscheinen neben dem Bild spezielle Markierungen; durch Verschieben können Sie die Größe des Bildes ändern. Um die Proportionen beizubehalten, können Sie die Umschalttaste verwenden. Während Sie diese gedrückt halten, müssen Sie die blauen Markierungen verschieben. Am Ende dieser Aktionen entsteht ein Bild einer Rakete.

Der nächste Schritt besteht darin, eine Kopie der Ebene zu erstellen.

Jetzt müssen Sie das Raketenbild aus der neuen Ebene etwas nach oben verschieben. Dazu können Sie bequem das Verschieben-Werkzeug verwenden, das sich in der zweiten Spalte des linken Menüs befindet, und den Aufwärtspfeil auf der Tastatur.

Jetzt müssen Sie das obere Bild schwarzweiß machen. Dies kann über den Punkt „Korrektur“ – „Farbton/Sättigung“ im oberen Menü erfolgen. Für eine vollständige Entsättigung sollte der Sättigungsregler auf -100 eingestellt sein. Mit dieser Aktion können Sie einen Effekt erstellen, bei dem sich die Schaltfläche „Nach oben“ von Schwarzweiß in Farbe ändert, wenn Sie mit der Maus darüber fahren.

Der letzte Schliff besteht darin, den zusätzlichen Platz um die beiden Bilder herum zu entfernen. Wählen Sie dazu im linken Menü den Punkt „Zuschneiden“ und wählen Sie nur zwei Raketen in einem Rechteck aus. Um das Zuschneiden durchzuführen, drücken Sie die Eingabetaste.

Das Ergebnis ist ein Bild, in dem kein zusätzlicher freier Speicherplatz vorhanden ist. Sie müssen die Breite und Höhe des resultierenden Bildes notieren, da diese Daten im nächsten Schritt nützlich sein werden.

Zum Speichern müssen Sie auf „Datei“ – „Speichern“ klicken, wo wir im linken Punkt „Arbeitsplatz“ den Namen des Bildes notieren (nur englisches Layout), das Format auswählen (in diesem Fall PNG) und Klicken Sie auf die Schaltfläche „Ja“.

In diesem Fall ist es nicht erforderlich, ein Skript zu schreiben. Es wird möglich sein, die öffentlich verfügbare Option zu nutzen, indem einige Änderungen am fertigen Code vorgenommen werden.

Dazu müssen Sie einen beliebigen Code-Editor herunterladen. Die beliebteste und auch kostenlose Option ist Notepad++. Nach der Installation müssen Sie den gesamten Code kopieren und einfügen:

Um eine Scroll-Up-Schaltfläche für eine Site zu installieren, müssen Sie den Code an der erforderlichen Stelle platzieren. Sie müssen es vor dem Tag eingeben .

Meistens befindet sich die „Nach oben“-Schaltfläche einer Website unten („Fußzeile“).

Sie müssen der Datei style.css der Site den folgenden Code hinzufügen:

In diesem Fall benötigen Sie die Angaben zur Breite und Höhe des Bildes. Sie müssen nur noch die empfangenen Daten in den Code eingeben und schon ist der „Up“-Button für die Seite fertig! Was sonst?

Für dieses CMS kann der „Top“-Button sowohl über Plugins als auch eigenständig erstellt werden.

Die Plugin-Methode ist die bequemste und einfachste Installation, da Sie lediglich auf die Schaltfläche „Installieren“ klicken und alle Funktionen im Plugin-Menü konfigurieren müssen.

Die Wahl des Letzteren sollte mit Vorsicht angegangen werden, da man damit leicht einen Virus für die Website erwerben kann. Die beliebteste und bewährteste Option ist ein Plugin namens Scroll Back To Top. Sie können es über die standardmäßige Wordpress-Plugin-Suche herunterladen.

Diese Erweiterung verfügt über mehrere Funktionen und es wird sehr einfach sein, die Schaltfläche „Zurück zum Anfang“ für eine Wordpress-Site anzupassen. Es ist nicht notwendig, alle Werte zu ändern; Sie müssen lediglich das Erscheinungsbild und die Position der Schaltfläche auf der Site-Seite konfigurieren.

Wie Sie sehen, ist die Installation des „Up“-Buttons mithilfe von Plugins sehr einfach. Es gibt jedoch eine wichtige Nuance: Jedes installierte Plugin lädt das CMS. Dies kann sich auf die Geschwindigkeit der Internetressource auswirken. Aus diesem Grund versuchen die meisten Websitebesitzer, alle Änderungen direkt im Code vorzunehmen und keine Erweiterungen von Drittanbietern zu verwenden. Sie können eine „Nach oben“-Schaltfläche für eine Website in HTML erstellen, wodurch der Ressourcenverbrauch minimiert wird.

Bevor Sie alle Wordpress-Systemdateien ändern, müssen Sie diese sichern. Als nächstes können Sie alle oben beschriebenen Schritte zum Erstellen Ihrer eigenen Schaltfläche ausführen.

CMS Joomla unterstützt ebenso wie Wordpress die Installation von Plugins. Die erfolgreichste Version der „Top“-Schaltfläche für eine Website in Joomla 3 ist eine Erweiterung namens „Top of the Page“.

In diesem CMS kann jedes Plugin über den „Extension Manager“ installiert werden. Dazu benötigen Sie:

• Laden Sie das Plugin im Internet herunter.
• Klicken Sie im Erweiterungsmanager auf die Schaltfläche „Durchsuchen“;
• Wählen Sie das heruntergeladene Archiv aus.
• Klicken Sie auf „Herunterladen“ und installieren Sie es.

Jetzt müssen Sie es im Plugin Manager aktivieren. Dazu müssen Sie in diesen Abschnitt gehen, das Plugin suchen und seinen Status auf „aktiviert“ ändern.

Oben auf der Seite bietet die folgende Funktionalität:

• In/administrator ausführen – Aktivieren der Option nicht nur auf der Internetressource, sondern auch im Joomla CMS-Panel selbst.
• Position der Schaltflächenanzeige: Wie viele Pixel muss der Benutzer zurückspulen, damit die Schaltfläche „Nach oben“ angezeigt wird?
• Schaltflächentext weglassen – Text auf der Schaltfläche vorhanden.
• Immer oben – Die Site-Seite wird immer von Anfang an angezeigt. Wenn Sie Anker verwenden, um zu einer bestimmten Stelle auf der Seite zu scrollen, muss diese Option nicht aktiviert werden.
• Smooth Scroll – sorgt für ein flüssigeres Scrollen der Seite.
• Scrolldauer – die Zeit, nach der die Seite vollständig zum Anfang verschoben wird.
• Scroll-Übergang – fügt dem Scrollen tolle visuelle Effekte hinzu.
• Übergangserleichterung – „erleichterte“ Bewegung zum Seitenanfang.
• Link-Standort – Standort des Symbols. Standardmäßig befindet sich die Schaltfläche in der unteren rechten Ecke.
• Stile verwenden – individueller Schaltflächenstil, der im Feld unten festgelegt werden kann. Bei einem negativen Wert werden alle Styling-Parameter aus dem aktiven Site-Theme übernommen.
• Link-Stil – Feld zur Eingabe Ihrer Schaltflächenstil-Parameter.

Um den Stil des „Up“-Buttons selbst anzupassen, müssen Sie zumindest über minimale CCS-Kenntnisse verfügen. Andernfalls sollten Sie den Wert des vorletzten Parameters auf „Nein“ stellen.

Eine weitere wichtige Nuance besteht darin, dass die übliche Inschrift auf dem Symbol englischen Text enthält: Zurück nach oben. Ein solcher Text kann auf einer russischsprachigen Website nicht vorhanden sein, daher sollten Sie ihn einfach in den Plugin-Parametern deaktivieren oder auf Russisch ändern.

Um diese Beschriftung zu ändern, müssen Sie sich über FTP oder den im Hosting integrierten Dateimanager beim Site-Server anmelden. Als nächstes müssen Sie im Verzeichnis „/administrator/sprache/en-GB/“ eine Datei namens „en-GB.plg_system_topofthepage.ini“ finden.

Bevor Sie den Text ändern, sollten Sie die Kodierung dieses Dokuments auf UTF-8 ändern. Dies ermöglicht eine normale Anzeige russischer Buchstaben.

und ändern Sie den Satz in Anführungszeichen in Russisch. Sie können Sätze wie „Auf!“, „An den Anfang!“ verwenden. oder „Auf!“

Der „Up“-Button für eine Site auf Ucoz muss mithilfe von Code-Injection erfolgen, da die Anbindung von Plugins für dieses CMS nicht möglich ist. Dies erfordert jedoch kein langes Studium der Systemdateien und die Suche nach den erforderlichen Zeilen; Sie müssen lediglich einen kleinen Code an der erforderlichen Stelle einfügen.

Für die Installation benötigen wir:

• Gehen Sie zu „Systemsteuerung -> Design -> Designverwaltung (Vorlagen) -> Unten auf der Website;
• Fügen Sie das Skript ein (zu finden auf der offiziellen Website des Projekts und in Ressourcen von Drittanbietern).

Danach erscheint in der unteren rechten Ecke ein Symbol, das den Benutzer ganz nach oben auf der Seite führt.

Wie Sie sehen, war die Installation einer „Zurück zum Anfang“-Schaltfläche für eines der CMS nicht besonders schwierig. Sie können entweder eine automatisierte Installationsmethode (Plugins) oder eine manuelle verwenden. Die letzte Option bleibt jedoch die am besten geeignete, da sie sich nicht negativ auf die Leistung der Website auswirkt.

Sie können die Schaltfläche „Zurück zum Anfang“ für eine HTML-Site verwenden, um den Verbrauch von Site-Ressourcen zu minimieren, da eine große Anzahl von Erweiterungen negative Auswirkungen auf die Leistung der Ressource haben kann. Ein „Up“-Button-Plugin hat keinen großen Einfluss auf die Ladezeit der Seiten einer Website, aber in den meisten Fällen hat der Benutzer mindestens ein Dutzend Plugins auf dem CMS installiert. In diesem Fall kann jedes Plugin die Leistung der Seiten der Website negativ beeinflussen.

Oh, wie schnell gewöhnt sich ein Mensch an die Bequemlichkeit, egal wo er sich befindet: zu Hause oder auf einer Website! Ich weiß nicht, wie es Ihnen geht, aber ich bin es gewohnt, die Schaltfläche „Zurück zum Anfang“ zu verwenden, und das ist besonders praktisch, wenn der Artikel groß ist.
In diesem Artikel erkläre ich Ihnen, wie Sie mithilfe der jQuery-Bibliothek eine Schaltfläche „Zurück zum Anfang“ für eine Website erstellen.

1. Verbinden wir die jQuery-Bibliothek. Übrigens habe ich kürzlich darüber geschrieben.
Fügen Sie zwischen den Tags diesen Code hinzu:

2. Fügen Sie die Linkschaltfläche „Zurück zum Anfang“ zwischen den Tags hinzu:

oben

und fügen Sie direkt nach der Schaltfläche „Zurück zum Anfang“ den JavaScript-Code hinzu:

$(function() ( $(window).scroll(function() ( if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up ").fadeOut(400); )); $("a#move_up").click(function())( $("body,html").animate((scrollTop: 0), 450); return false; ) ); ));

Achten Sie auf Zeile Nr. 6, dort steht die Zahl 100 – sie gibt an, nach wie vielen Wörtern die Schaltfläche „Zurück nach oben“ erscheinen soll. Sie können jede andere Nummer angeben, die Ihnen passt.
In Zeile Nr. 11 gibt es eine Zahl 450 – gibt die Seitenaufstiegsgeschwindigkeit an. Sie können auch Ihre Nummer angeben. Je höher die Zahl, desto langsamer steigt die Seite nach oben; je niedriger die Zahl, desto schneller steigt die Seite nach oben.

3. Fügen Sie nun den CSS-Code hinzu. Wenn Sie nicht wissen, wie Sie CSS mit einer HTML-Datei verbinden, lesen Sie hier mehr darüber.

A#move_up ( position:fixed; /* feste Blockposition*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans- serif; Hintergrund:#3366ff; /*opacity:0.7; #move_up:hover (opacity:0.9; filter: alpha(opacity=90); )

Das ist alles. So sieht der fertige Code aus:

a#move_up( position:fixed; /* feste Blockposition*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans- serif; Hintergrund:#3366ff; /*opacity:0.7; border-radius: none;) #move_up:hover( opacity:0.9; filter: alpha(opacity=90);) Ihr Text (vorzugsweise mehr Text) nach oben $ (function() ( $(window).scroll(function() ( if($(this) .scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up" ).fadeOut(400 )); ()( $("body,html").animate((scrollTop: 0), 50); return false; ));

Wenn Sie nun auf der Seite nach unten scrollen, erscheint ein kleiner blauer durchscheinender Block mit der Aufschrift „Oben“.

Die Schaltfläche „Zurück zum Anfang“ ist etwas, das viele von Ihnen wahrscheinlich schon auf vielen Websites gesehen haben. Dies ist der Pfeil, der beim Scrollen in der unteren rechten Ecke einer Webseite erscheint. Wenn Sie darauf klicken, gelangen Sie zurück zum Anfang der Seite. Wenn Sie im Rahmen Ihres Website-Designprozesses eine Schaltfläche „Zurück zum Anfang“ hinzufügen möchten oder sich einfach fragen, wie Sie selbst eine erstellen können, sind Sie herzlich willkommen!

Unser Code besteht aus zwei Teilen, CSS-Stilen und einem kleinen jQuery-Skript. Beginnen wir mit CSS.

Wir beginnen mit der Erstellung der Stile und Markups für unsere Schaltfläche. Hier ist der HTML-Teil:

< link rel= „Stylesheet“ href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >

< a Ausweis= "Schaltfläche" >

Die Schaltfläche besteht nur aus einem Ankertag mit der Schaltflächen-ID. Wir fügen auch einen Link zur FontAwesome-Bibliothek hinzu, damit wir ein Symbol für unsere Schaltfläche verwenden können.

Die anfänglichen Stile für die Schaltfläche sehen folgendermaßen aus:

#button ( Anzeige: Inline-Block; Hintergrundfarbe: #FF9800; Breite: 50 Pixel; Höhe: 50 Pixel; Textausrichtung: Mitte; Randradius: 4 Pixel; Rand: 30 Pixel; Position: fest; unten: 30 Pixel; rechts: 30px; Übergang: Hintergrundfarbe .3s; Z-Index: 1000; ) #button:hover ( Cursor: Zeiger; Hintergrundfarbe: #333; )

Da es sich bei der Schaltfläche um ein Bundle-Element handelt und Bundles standardmäßig Inline-Elemente sind, müssen wir die Anzeigeeigenschaft in einen Inline-Block ändern, damit wir ihm eine Größe zuweisen können.

Erstellen wir eine quadratische Schaltfläche mit 50 x 50 Pixeln und abgerundeten Ecken mit 4 Pixeln. Wir geben ihm eine leuchtend orange Farbe und 30 Pixel auf jeder Seite. Durch die feste Position bleibt unsere Schaltfläche beim Scrollen der Seite immer an der gleichen Stelle, und der Z-Index ist so hoch, dass die Schaltfläche immer andere Elemente der Website überlappt. Wenn wir mit der Maus über die Schaltfläche fahren, verwandelt sich der Cursor in einen Zeiger und der Hintergrund wird dunkelgrau. Um den Übergang reibungslos zu gestalten, legen wir den Übergang für die Eigenschaft „Hintergrundfarbe“ auf 0,3 Sekunden fest. Wenn wir die Taste drücken, ändert sich auch die Hintergrundfarbe und wird etwas heller.

Da unsere Schaltfläche nun leer ist, fügen wir ihr ein Symbol hinzu. Wir tun dies, indem wir ein ::after-Pseudo=-Element wie folgt hinzufügen:

#button::after ( Inhalt: "\f077"; Schriftfamilie: FontAwesome; Schriftstärke: normal; Schriftstil: normal; Schriftgröße: 2em; Zeilenhöhe: 50px; Farbe: #fff; )

Wir werden ein Symbol aus der beliebtesten Schriftartenbibliothek, FontAwesome, auswählen. Beginnen wir mit dem Chevron Up-Symbol.

Um es in einem Pseudoelement anzuzeigen, setzen Sie das Tag „font-family“ auf „FontAwesome“ und weisen Sie Ihrem Symbol in „content“ einen Unicode-Wert zu.

Stellen Sie außerdem sicher, dass Ihre Zeilenhöhe der Höhe Ihres Symbols entspricht, wenn es horizontal zentriert sein soll.

In diesem Unterabschnitt werden wir darüber sprechen, wie die Schaltfläche tatsächlich funktioniert. Der einfachste Weg, dies zu tun, ist die Verwendung der jQuery-JavaScript-Bibliothek. Zuerst müssen wir jQuery zum HTML-Markup hinzufügen. Fügen Sie diese Zeile direkt vor dem schließenden Body-Tag hinzu.

< script src=" https:// cdnjs. Wolkenflare. com/ Ajax/ libs/ jquery/3.1.1/ jquery. Mindest. js">

Jetzt können wir unser Skript mit der jQuery-Syntax schreiben. Fügen Sie dieses Skript nach der jQuery-Zeile hinzu:

jQuery(document).ready(function() ( var btn = $("#button"); $(window).scroll(function() ( if ($(window).scrollTop() > )); btn.on ("click", function(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));

Schauen wir uns dieses Skript genauer an. Sie haben wahrscheinlich die erste Codezeile bemerkt:

jQuery(document).ready(function () (

Sie sollten den Code in dieser Funktion nur ausführen, wenn das Dokument vollständig geladen ist. Dies ist eine hervorragende Möglichkeit, Fehler zu vermeiden, wenn Ihr JavaScript-Code Änderungen an Teilen der Webseite vornehmen möchte, die nicht vollständig im Browser geladen sind. Der Code, den wir ausführen, nachdem das Dokument vollständig geladen ist, besteht aus zwei Hauptcodeblöcken, von denen jeder seine eigene Aufgabe erfüllt. Der erste Teil des Skripts sorgt dafür, dass unsere Schaltfläche erscheint und verschwindet, nachdem der Seitenlauf einen bestimmten Punkt erreicht hat. Der zweite Teil sorgt dafür, dass die Seite nach dem Klicken auf die Schaltfläche nach oben scrollt. Schauen wir uns jeden von ihnen im Detail an.

Hier ist der Code, der für diese Funktion verantwortlich ist:

Var btn = $("#button"); $(window).scroll(function() ( if ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); ) ));

Wir deklarieren zunächst die BTN-Variable und weisen ihr die ID der Schaltfläche zu, damit wir später im Code leichter darauf verweisen können. Es hilft JavaScript auch dabei, Berechnungen schneller durchzuführen. Sobald wir das Element in einer Variablen speichern, muss JavaScript nicht mehr oft die gesamte Seite durchsuchen, wenn wir es in unserem Code erneut verwenden müssen.

jQuery verfügt über eine praktische .scroll()-Funktion.

Es bindet einen Code, der jedes Mal ausgeführt wird, wenn auf Ihrer Webseite gescrollt wird. Es benötigt einen Parameter für eine Funktion, die jedes Mal ausgeführt wird, wenn die Seite gescrollt wird. Sie können es auf jedes scrollbare Element anwenden, z. B. auf Rahmen und Elemente mit zusätzlichen Eigenschaften, die auf Scrollen eingestellt sind. Normalerweise wenden wir es auf ein Fensterelement an, da das Scrollen dort in den meisten Fällen stattfindet, auch in unserem Beispiel.

$(Fenster). scroll(Funktion()(

Innerhalb der Funktion fügen wir eine if/else-Anweisung ein:

If ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); )

Wir versuchen hier, die vertikale Position der Bildlaufleiste zu überprüfen und dafür zu sorgen, dass unsere Schaltfläche angezeigt wird, wenn die Bildlaufleiste einen bestimmten Punkt unterschreitet, und verschwindet, wenn sie sich über diesem Punkt befindet.

Um die aktuelle Position der Bildlaufleiste zu ermitteln, verwenden wir die integrierte .scrollTop()-Methode von jQuery. Es werden lediglich einige Pixel zurückgegeben, die über dem scrollbaren Bereich verborgen sind.

Jedes Mal, wenn wir durch die Seite scrollen, prüft JavaScript, wie viele Pixel ausgeblendet sind, und vergleicht sie mit der Anzahl. In unserem Fall beträgt diese Zahl bis zu 300, aber Sie können sie bei Bedarf ändern.

Wenn wir 300 Pixel verwenden, fügen wir unserer Schaltfläche eine Show-Klasse hinzu, damit sie angezeigt wird. Wenn die Zahl kleiner als 300 ist, entfernen wir diese Klasse. Das Hinzufügen und Entfernen von Klassen ist ein weiterer Grund, warum jQuery beliebt ist. Wir können dies mit zwei einfachen Methoden tun: addClass() und removeClass(). Allerdings haben wir noch keine Show-Klasse in unserem CSS, also fügen wir eine hinzu:

If ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); )

Standardmäßig ist Ihre Schaltfläche ausgeblendet, daher müssen wir dem #button-Element einige weitere Regeln hinzufügen:

#button (Übergang: Hintergrundfarbe .3s, Deckkraft .5s, Sichtbarkeit .5s; Deckkraft: 0; Sichtbarkeit: ausgeblendet; )

Um den Übergang reibungslos zu gestalten, fügen wir dem Übergangsattribut zwei weitere Werte hinzu, Deckkraft und Sichtbarkeit, die auf 0,5 Sekunden festgelegt sind.

Der zweite Teil des Skripts ermöglicht es Ihnen, nach einem Tastendruck nach oben zu gehen.

Btn.on("click", function(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));

Die erste jQuery-Methode, die wir hier sehen, ist on() . Sein erster Parameter ist ein JavaScript-„Klick“-Ereignis, das jedes Mal auftritt, wenn wir in unserem Browser klicken. Der zweite Parameter ist eine Verarbeitungsfunktion, die ausgeführt wird, sobald das Ereignis eintritt.

Die Verarbeitungsfunktion akzeptiert einen Ereignisparameter. Wir können es benennen, wie wir wollen, aber normalerweise werden „e“ oder „event“ bevorzugt. Wir benötigen einen Ereignisparameter, um ihn an die Funktion zu übergeben und ihn für die Methode „preventDefault()“ zu verwenden.

Die Methode e.preventDefault() verhindert, dass das Ereignis etwas Zufälliges ausführt, beispielsweise dass der Link uns nicht zur nächsten Seite führt. In unserem Fall ist dies nicht kritisch, da unser Ankerelement kein href-Attribut hat und uns ohnehin nicht zu einer neuen Seite führt, aber es ist immer am besten, es noch einmal zu überprüfen.

Die jQuery-Methode .animate() ist diejenige, die den ganzen Trick erledigt.

$("html, body").animate((scrollTop:0), "300");

Der erste Parameter der .animate()-Methode ist eine Liste von Eigenschaften, die wir animieren sollen. Unsere Eigenschaft heißt scrollTop und wir möchten, dass sie den Wert 0 hat. Der Typ dieses Parameters ist ein einfaches Objekt, daher müssen wir geschweifte Klammern verwenden und unsere Werte mithilfe der Schlüssel/Wert-Paar-Syntax schreiben.

Der zweite Parameter ist die Geschwindigkeit, mit der unsere Animation starten soll. Sie wird in Millisekunden gemessen. Je höher die Zahl, desto langsamer die Animation. Der Standardwert ist 400, aber ändern wir ihn auf 300.

Abschließend wenden wir die animate-Methode auf die HTML- und Body-Elemente auf unserer Seite an.

Jedes Mal, wenn wir nun auf die Schaltfläche klicken, gelangen wir zurück zum Anfang der Seite.

Die endgültige Version können Sie in der CodePen-Demo sehen. Zu Demonstrationszwecken habe ich auch Beispieltext eingefügt.

Schauen Sie sich den Code für die Schaltfläche „Zurück zum Anfang“ von Matthew Cain (@matthewcain) auf CodePen an.

Die Schaltfläche „Zurück zum Anfang“ ist ein nützliches Werkzeug beim Design der Seitenoberfläche. Und wenn Ihre Website darüber verfügt, wird die Interaktion der Besucher mit der Website viel komfortabler. Dieser Leitfaden hilft Ihnen, CSS und JavaScript zu verstehen, auch wenn Sie kein Webentwickler sind. Ich hoffe, dass der Beitrag für Sie nützlich war und Sie auf jeden Fall in der Lage sein werden, einen solchen Button zu erstellen!

Grüße liebe Freunde. Heute zeige ich Ihnen, wie Sie auf einer Website einen „Zurück zum Anfang“-Button erstellen. Zufälligerweise war meine Blog-Vorlage ursprünglich nicht mit dieser nützlichen Funktion ausgestattet und Besucher konnten nicht schnell vom Ende des Artikels nach oben gelangen. Daher werde ich Ihnen gleichzeitig mit der Erstellung eines solchen Buttons für mich erklären, wie es geht (Vielleicht haben Sie das gleiche Problem und wussten nicht, wie Sie es lösen sollen).

Der Artikel wird folgende Teile enthalten:

Ehrlich gesagt leben Millionen ohne einen solchen Knopf. Das Fehlen dieses Elements ist nicht kritisch, aber die Verwendung dieses Elements kann sowohl für Besucher als auch für Sie als Eigentümer der Ressource gewisse Vorteile bringen.

Website-Seiten sind oft mit Inhalten überladen. Lange und ausführliche Artikel zwingen Besucher dazu, immer weiter nach unten zu scrollen und den Text mit dem Mausrad zu scrollen. Ganz am Ende warten Dutzende Kommentare auf sie, und um eigene hinzuzufügen, müssen sie noch mehr Arbeit leisten.

Während wir mit dem Lesen beschäftigt sind, ist solches Scrollen nicht besonders ermüdend. Doch das Zurückgehen macht nicht mehr so ​​viel Spaß, und anstatt noch einmal nach oben zu gehen und andere Abschnitte Ihrer Website zu erkunden, schließt der Benutzer sie einfach.

Mithilfe des Aufwärtspfeils für die Website können Sie schnell und bequem zum Hauptmenü zurückkehren.

Die Vorteile für die Website ergeben sich direkt aus dem vorherigen Text. Die Schaltfläche vereinfacht die Seitennavigation und verbessert die Verhaltensfaktoren für Ihre Ressource, da Benutzer aktiver sind und Ihren Materialien mehr Aufmerksamkeit schenken.

Einfache Navigation und gute Verhaltensfaktoren führen wiederum zu einer Erhöhung der Autorität in den Augen und dementsprechend zu einer Erhöhung der Positionen in den Suchergebnissen.

Ich werde mir zwei Möglichkeiten ansehen, Ihre Website mit einer solchen Schaltfläche auszustatten. Die erste richtet sich an einfache Websites, für die keine Möglichkeit oder kein Wunsch besteht, zusätzliche Bibliotheken oder Javascript anzubinden.

Für die Umsetzung reicht die Standardfunktionalität der Auszeichnungssprache HTML, ergänzt um CSS-Stile, aus. Die Aufwärts-Schaltfläche fungiert wie ein normaler Link und leitet den Besucher an den Anfang der Seite.

Vorteile:

• Einfachheit und einfache Einrichtung;
• Keine Bibliotheks- oder Skriptunterstützung erforderlich.

Mängel:

• Der Button ist immer sichtbar, auch wenn sich der Besucher ganz oben auf der Seite befindet;
• Die Aufwärtsbewegung erfolgt nicht sanft, sondern ruckartig.

Der Schaltflächencode besteht aus zwei Elementen. Der erste ist ein HTML-Link, der im Site-Code platziert wird. Der zweite ist der CSS-Stil der Schaltfläche. Er befindet sich in der Stildatei und ist für die Position der Schaltfläche und ihr Erscheinungsbild verantwortlich.

Platzieren Sie den folgenden Code im Hauptteil der Website (im Hauptteil-Tag, vorzugsweise direkt vor dem Schließen). Bitte beachten Sie, dass Sie ein Bild benötigen, das als Schaltfläche dient (ersetzen Sie den Codeabschnitt durch Ihren Pfad zum Bild und seinen Namen).

Buttonup (Breite:88px; Höhe:118px; Position:fest; unten:20px; rechts:50px;)

Dieser Code ist für die Position der Schaltfläche verantwortlich. Durch Bearbeiten der Zahlen können Sie sie ändern. Sobald Sie die Datei speichern, wird die Schaltfläche wirksam. Stellen Sie den Breitenparameter gleich der Breite des Bildes ein, unten – der Einzug vom unteren Bildschirmrand, rechts – vom rechten Bildschirmrand.

Also, Freunde, wir haben eine einfache HTML-Schaltfläche erstellt. Kommen wir nun zur Implementierung einer fortgeschritteneren Version. Darin werden wir die Mängel beseitigen, die in der vorherigen Version vorhanden waren, nämlich:

• Die Schaltfläche wird nicht ständig vor Ihren Augen auftauchen, sondern nur angezeigt, wenn der Besucher auf der Seite nach unten scrollt;
• Der Effekt der Rückkehr zum Seitenanfang ist gleichmäßig, was stilvoll aussieht.
• Darüber hinaus ändert sich unsere Schaltfläche, wenn Sie mit dem Cursor darüber fahren (Farbe oder Helligkeit ändern).

Es gibt viele Möglichkeiten und Skripte, mit denen Sie einen Aufwärts-Button erstellen können. Ich gebe ehrlich zu, ich bin kein Programmierer, und obwohl ich in der vorherigen Version mit HTML klargekommen bin, bin ich ein absoluter Neuling in JavaScript. Also habe ich eine Reihe verschiedener Versionen durchgesehen und studiert und mich für die Option entschieden, die am einfachsten zu implementieren war (weniger Änderungen in verschiedenen Dateien).

Im Allgemeinen ist das Erstellen einer solchen Schaltfläche etwas komplizierter, aber jeder kann es herausfinden. Alles geschieht in 2 Schritten:

Wenn Sie WordPress oder ein anderes Standard-CMS verwenden, ist diese Bibliothek höchstwahrscheinlich standardmäßig enthalten. In diesem Fall können Sie diesen Punkt überspringen.

Um die jQuery-Bibliothek zu verbinden, müssen Sie die folgende Zeile in den Abschnitt Ihrer Site schreiben:

Der Skriptcode kann auf zwei Arten eingefügt werden:

• oder platzieren Sie es vollständig zwischen den Tags,
• oder indem Sie das Skript in einer separaten Datei platzieren und seine Verbindung im Seitencode angeben.

Die erste Möglichkeit ist einfacher, die zweite meiner Meinung nach bequemer.

jQuery(document).ready(function($)( $(""+ "..png) 0 0 no-repeat; )" + ".scrollTop:hover( background-position:0 -133px;)" +"" ).appendTo("body"); var speed = 550, $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), speed); )); //appearance function show_scrollTop())( ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); ) $ (window).scroll(function())( show_scrollTop(); ));

Wenn Sie wie ich eine separate Datei für das Skript verwenden, müssen Sie den Code zwischen den darin enthaltenen Tags einfügen. Die Tags selbst müssen nicht in die Datei kopiert werden. Sie platzieren die Datei auf Ihrem Hosting.

Ich habe die Datei buttonup.js genannt. Um es zu verbinden, schreiben wir die folgende Zeile in den Site-Header:

Geben Sie statt „Pfad zur Datei“ die Adresse ein, unter der sich Ihre Datei mit dem Skript befindet.