Eine solche Funktion wie der "Aufwärts"-Button für die Seite macht die Internet-Ressource für ihre Besucher bequemer. Es hilft Ihnen, von überall auf der Seite zum Anfang der Seite zu gelangen. Dies ist ein Muss für Online-Shops und Websites mit großen Artikeln, die ein langes Scrollen nach unten erfordern.
Wofür ist es
Momentan haben die meisten Seiten keine solche Funktion wie einen "Nach oben"-Button, und daran ist nichts Kritisches. Aber seine Verwendung kann sowohl für die Internetressource als auch für ihre Besucher viele Vorteile bringen.
Vorteil für Besucher
Es passiert oft, wenn die Seite einer Internet-Ressource stark mit Informationen überladen ist, wenn ein Informationsartikel viel Platz einnimmt und Sie mit dem Mausrad auf der Seite nach unten scrollen müssen. Darüber hinaus kann es am Ende des Artikels viele Kommentare dazu geben.
Wenn ein Besucher einen Artikel liest, ist es nicht ermüdend, die Seite nach unten zu scrollen, aber wenn der Text zu Ende ist und Sie nach oben gehen müssen, wird es ein wenig ermüdend. Die meisten Leute werden einfach zu faul sein, lange zu scrollen, und sie werden die Seite einfach schließen, anstatt noch einmal durch ihre Weiten zu spazieren.
Mit der TasteWenn Sie sofort zum Anfang der Seite wechseln, ist es bequemer, Zeit auf der Website zu verbringen.
Nutzen für die Internetressource
Die Vorteile für die Ressource selbst kommen von früheren Faktoren, da eine einfachere Site-Navigation Verh altensfaktoren verbessert, da alle Besucher aktiver in ihren Aktionen sind und zu anderen Seiten wechseln.
So beeinflussen diese Verh altensfaktoren die Einstellung aller Suchmaschinen zur Seite und führen zu einer Verbesserung der Position in den Suchergebnissen.
So erstellen Sie den "Hoch"-Button auf der Website selbst
Weiter handeln. Sie können jederzeit selbst eine Scroll-Up-Sch altfläche für eine Website in einem der CMS erstellen, indem Sie nur ein paar extrem einfache Schritte befolgen:
- Bilderstellung;
- Skript erstellen;
- Sch altflächenstil erstellen;
- Hinzufügen zur Website.
Sch altflächenbild
Um einen "Nach oben"-Button auf der Website hinzuzufügen, müssen Sie zuerst das Symbol selbst erstellen, wenn der Benutzer darauf klickt, bewegt er sich zum Anfang der Seite. Dazu können Sie vorgefertigte Optionen verwenden, unter denen Sie immer die am besten geeignete auswählen können.
Um das Erscheinungsbild der Sch altfläche zu verbessern, müssen wir einige Verbesserungen vornehmen, nämlich ein Sprite erstellen, das es uns ermöglicht, Hintergrundbilder basierend auf CSS zu kombinieren und daraus eine Animation zu erstellen.
Für grafische Arbeiten können Sie einen beliebigen Editor verwenden. Die bequemste Option wäre jedoch ein Online-Service. PIXLR, da es hier nichts zum Download gibt und Sie es direkt in Ihrem Browser verwenden können.
Um zu beginnen, wählen Sie im erscheinenden Editor-Fenster das Feld "Bild vom Computer hochladen" aus. 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 "Frei transformieren …"
Als nächstes erscheinen neben dem Bild spezielle Markierungen, durch deren Bewegung Sie die Größe des Bildes verändern können. Um die Proportionen beizubeh alten, können Sie die Umsch alttaste verwenden, die Sie gedrückt h alten müssen, um die blauen Markierungen zu verschieben. Am Ende dieser Schritte erhält man ein Bild einer Rakete.
Der nächste Schritt besteht darin, eine Kopie der Ebene zu erstellen.
Nun musst du das Bild der Rakete von der neuen Ebene etwas nach oben verschieben. Verwenden Sie dazu bequem das Verschieben-Werkzeug, das sich in der zweiten Sp alte des linken Menüs befindet, und den Aufwärtspfeil auf der Tastatur.
Jetzt müssen wir 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 werden. Mit dieser Aktion können Sie einen Effekt erstellen, bei dem die Sch altfläche „Nach oben“von Schwarzweiß zu Farbe wechselt, wenn Sie mit der Maus darüber fahren.
Der letzte Schliff ist das Entfernen von zusätzlichem Platz um die beiden Bilder. Wählen Sie dazu im linken Menü den Punkt „Zuschneiden“undWir wählen nur zwei Raketen in einem Rechteck aus. Zum Beschneiden wird die Eingabetaste gedrückt.
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 aufschreiben, da diese Daten im nächsten Schritt nützlich sein werden.
Zum Speichern müssen Sie auf "Datei" - "Speichern" klicken, wo wir im linken Absatz "Mein Computer" den Namen des Bildes schreiben (nur das englische Layout), wählen Sie das Format (in diesem Fall, PNG) und klicken Sie auf die Sch altfläche "Ja".
Datei mit dem Skript der "Hoch"-Taste
Du musst in diesem Fall kein Skript schreiben. Es wird möglich sein, die öffentliche Version zu verwenden, wobei 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:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); gebe false zurück;}); }); |
Als nächstes klicken Sie im oberen Menü auf "Datei" - "Speichern unter …", wonach wir den Code im.js-Format speichern. Danach können Sie diesen Code auf Ihrer Website verwenden, indem Sie die Skriptdateien und Bilder über eine FTP-Verbindung hochladen.
Vor Ort installieren
Um die Scroll-Up-Sch altfläche für die Website einzurichten, müssen Sie platzierenerforderlicher Ortscode. Sie müssen es vor dem Tag. eingeben
Sch altflächenstil mit CSS erstellen
Meistens befindet sich der "Nach oben"-Button für die Seite ganz unten ("Footer").
Der folgenden Code muss der style.css-Datei der Website hinzugefügt werden:
|
/Aufwärtstaste/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/nativer Bildpfad/ width:39px;/ Sch altfläche width/ height:96px;/50% Button-Höhe/ bottom:5px;/untere Polsterung an fester Position/ left:89%;/nach links verschieben/ }.scrollTop:hover{ background-position:0 -108px; } /Hintergrundversatz/" |
In diesem Fall werden diese Bildbreiten- und -höhendaten benötigt. Es müssen nur noch die empfangenen Daten in den Code eingegeben werden, und die Sch altfläche "Nach oben" für die Site ist fertig! Was noch?
Up-Button für Wordpress-Site
Für dieses CMS kann die Sch altfläche "Nach oben" sowohl mit Plugins als auch unabhängig erstellt werden.
Die Plug-in-Methode ist die bequemste und einfachste zu installieren, da Sie nur auf die Sch altfläche "Installieren" klicken und alle Funktionen im Plug-in-Menü konfigurieren müssen.
Die Wahl des letzteren sollte mit Vorsicht angegangen werden, da es damit leicht ist, einen Virus auf der Website zu erwerben. Die beliebteste und bewährteste Option ist ein Plugin namens Scroll Back To Top. Sie können es über die Standardsuche für Wordpress-Plugins herunterladen.
Diese Erweiterung hatmehrere Funktionen, und es wird sehr einfach sein, die Sch altfläche "nach oben" für eine Wordpress-Site anzupassen. Es ist überhaupt nicht notwendig, alle Werte zu ändern, Sie müssen nur das Aussehen und die Position der Sch altfläche auf der Site-Seite konfigurieren.
Wie Sie sehen können, ist das Einrichten des Up-Buttons mit Plugins sehr einfach. Aber es gibt eine wichtige Nuance, nämlich dass jedes installierte Plugin das CMS lädt. Dies kann die Geschwindigkeit der Internetressource beeinträchtigen. Aus diesem Grund versuchen die meisten Websitebesitzer, alle Änderungen direkt im Code vorzunehmen und nicht mit Hilfe von Erweiterungen von Drittanbietern. Sie können für eine HTML-Site einen "Nach oben"-Button erstellen, der den Ressourcenverbrauch minimiert.
Bevor Sie alle Wordpress-Systemdateien ändern, müssen Sie sie sichern. Dann können Sie alle oben beschriebenen Schritte befolgen, um Ihre eigene Sch altfläche zu erstellen.
Button "hoch" für Joomla
CMS Joomla unterstützt auch die Installation von Plugins wie Wordpress. Die erfolgreichste Version des "Nach oben"-Buttons 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:
- Plugin aus dem Internet herunterladen;
- klicken Sie auf die Sch altfläche "Durchsuchen" im Erweiterungsmanager;
- heruntergeladenes Archiv auswählen;
- auf "Herunterladen" klicken und installieren.
Jetzt müssen Sie es im "Plugin Manager" aktivieren. DafürSie müssen zu diesem Abschnitt gehen, das Plugin finden und seinen Status auf "aktiviert" ändern.
Der nächste Schritt besteht darin, alle Erweiterungsparameter zu konfigurieren, indem Sie denselben Abschnitt verwenden, in dem Sie die "Basisparameter" dieses Plugins auf der rechten Seite finden müssen.
Top of the Page hat folgende Funktionalität:
- Run in/ Administrator - aktiviert die Option nicht nur auf der Internetressource, sondern auch im Joomla CMS Panel selbst.
- Button Reveal Position - Wie viele Pixel muss der Benutzer zurückspulen, damit der Aufwärts-Button erscheint.
- Sch altflächentext auslassen - das Vorhandensein von Text auf der Sch altfläche.
- Always at Top - die Site-Seite wird immer von oben angezeigt. Wenn Sie Anker verwenden, um zu einer bestimmten Stelle auf der Seite zu scrollen, muss diese Option nicht aktiviert werden.
- Smooth Scroll - macht das Scrollen der Seite flüssiger.
- Scrolldauer - die Zeit, nach der die Seite vollständig an den Anfang verschoben wird.
- Scroll Transition - Fügt mehr visuelle Effekte zum Scrollen hinzu.
- Transition Easing - "schwächt" die Bewegung zum Seitenanfang.
- Link-Standort - der Ort des Symbols. Standardmäßig befindet sich die Sch altfläche in der unteren rechten Ecke.
- Use Styles – individueller Button-Stil, der im Feld darunter eingestellt werden kann. Wenn auf einen negativen Wert umgestellt wird, werden alle Stileinstellungen aus dem aktiven Design der Website übernommen.
- Link-Stil - ein Feld zur Eingabe Ihrer Parameter für den Sch altflächenstil.
Um den Stil der "Nach oben"-Sch altfläche anzupassen, müssen Sie mindestens ein Minimum habenCCS-Kenntnisse. Andernfalls sollten Sie den Wert des vorletzten Parameters auf "Nein" umstellen.
Eine weitere wichtige Nuance ist, dass die übliche Inschrift auf dem Symbol den englischen Text enthält: Return to Top. Solcher Text kann auf einer russischsprachigen Seite nicht vorhanden sein, also sollten Sie ihn einfach in den Plugin-Parametern deaktivieren oder auf Russisch ändern.
Um diese Inschrift zu ändern, müssen Sie über FTP oder den im Hosting integrierten Dateimanager zum Site-Server gehen. Als nächstes müssen Sie im Verzeichnis "/administrator/language/en-GB/" eine Datei namens "en-GB.plg_system_topofthepage.ini" finden.
Bevor Sie den Text ändern, sollten Sie die Codierung dieses Dokuments auf UTF-8 ändern. Dadurch werden russische Buchstaben normal angezeigt.
Als nächstes finden wir folgende Zeile:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Zurück zum Anfang"" |
und ändern Sie den Satz in Anführungszeichen in Russisch. Sie können Ausdrücke wie "Up!", "To the top!" oder „Hoch!“.
Am Ende müssen Sie die geänderte Datei speichern und nach der Sch altfläche "Nach oben" für die Website in Joomla suchen.
Up-Taste für Ucoz
Der "Aufwärts"-Button für die Seite auf Ucoz muss mit Code-Injektion erstellt werden, da es unmöglich ist, Plugins für dieses CMS zu verbinden. Dies erfordert jedoch kein langes Studium der Systemdateien und Suche nach den erforderlichen Zeilen, Sie müssen nur einen kleinen Code an der richtigen Stelle einfügen.
Um uns zu installierenerforderlich:
- gehe zu "Systemsteuerung -> Design -> Designverw altung (Vorlagen) -> Ende der Seite;
- Fügen Sie das Skript ein (zu finden auf der offiziellen Website des Projekts und den Ressourcen von Drittanbietern).
Schlussfolgerung
Danach erscheint ein Symbol in der unteren rechten Ecke, das den Benutzer an den Anfang der Seite bringt.
Wie Sie sehen können, war das Einrichten der Zurück-Sch altfläche für jedes CMS nicht besonders schwierig. Sie können sowohl eine automatisierte Installationsmethode (Plugins) als auch eine manuelle verwenden. Die letztere Option ist jedoch nach wie vor am besten geeignet, da sie die Leistung der Website nicht beeinträchtigt.
Sie können die "Zurück zum Anfang"-Sch altfläche für eine HTML-Site verwenden, um den Verbrauch von Site-Ressourcen zu minimieren, da eine große Anzahl von Erweiterungen die Leistung der Ressource negativ beeinflussen kann. Ein „Up“-Button-Plugin wird die Ladezeit der Seiten der Website nicht stark beeinflussen können, 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 beeinträchtigen.
