Aufgrund der großen Nachfrage habe ich ein Tutorial zum Erstellen eines Übergangs zum oberen Seitenrand geschrieben, wie auf der Web Designer Wall-Site. Dies ist mit jQuery sehr einfach zu bewerkstelligen (nur ein paar Codezeilen). Sie müssen den Positionswert der oberen Bildlaufleiste mit einem bestimmten Wert vergleichen und, wenn der erste größer ist, eine Schaltfläche „Gehe nach oben“ anzeigen. Sobald der Benutzer auf die Schaltfläche klickt, gelangt er zum Seitenanfang.
$(document).ready(function())( // #back-top first ausblenden $("#back-top").hide(); // #back-top $(function () ( $( window ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top"). fadeOut (); ) )); // scrolle beim Klicken auf 0px $("#back-top a").click(function () ( $("body,html").animate(( scrollTop: 0 ), 800 ); return false ));
Was passiert, wenn JavaScipt nicht unterstützt wird?Beachten Sie, dass die Schaltfläche „Gehe nach oben“ auf den #top-Anker verweist, der die Kennung des Body-Tags darstellt. Grundsätzlich ist es nicht erforderlich, einen Ankerlink zu setzen, da Sie mit jQuery zu jedem Teil der Seite scrollen können. Es ist jedoch immer noch besser, es festzulegen, falls JavaScript in einem bestimmten Browser nicht unterstützt wird.
Wenn eine Website eine erhebliche Menge an Inhalten enthält, verwenden Webmaster die sogenannte „Nach oben scrollen“-Schaltfläche. Mit dieser Schaltfläche können Sie sofort durch den Inhalt bis zum Seitenanfang scrollen und dem Benutzer so das mühsame manuelle Scrollen ersparen.
Sie können die Funktionsweise der Schaltfläche „Nach oben scrollen“ auf dieser Blogseite sehen.
Der Button selbst verwendet ein Bild im PNG-Format, weshalb Sie zunächst die für Sie passende Version des Bildes finden sollten. Hierfür eignet sich ein hochwertiger Icon-Dienst namens Iconfinder.
HTML-Code für die Button-AusgabeDer div-Block mit der Pfeil-nach-oben-ID wird zwischen den ...-Tags der ausführbaren Vorlagendatei (normalerweise der Datei index.php) eingefügt. In Yootheme Studio-Vorlagen ist dies die Datei theme.php, die sich im Ordner „layouts“ befindet.
CSS-Schaltflächenstil
Der an die Arrowup-Klasse angehängte CSS-Code für die Schaltflächengestaltung wird in jede in der Vorlage enthaltene CSS-Datei eingefügt. Typischerweise wird die Datei style.css verwendet, die sich im Ordner „css“ befindet.
#arrowup ( Position: fest; rechts: 30 Pixel; /*Schaltflächenposition: rechter Einzug*/ unten: 30 Pixel; /*Schaltflächenposition: unterer Einzug*/ Hintergrund: URL(/images/arrowup.png); /*Pfad zum Bildschaltflächen*/ Breite: 48px; /*Schaltflächenhöhengröße*/ Cursor: Zeiger; /*statische Transparenzstufe*/ ) #arrowup :hover ( Deckkraft: 1 ; /*Deckkraftgrad beim Schweben*/ )
JS-Code, damit die Schaltfläche funktioniertDer JavaScript-Code, der die Funktionalität der Schaltfläche implementiert, wird entweder zwischen den ...-Tags der ausführbaren Vorlagendatei (index.php) oder vor dem schließenden Tag platziert.
$(document).ready(function() ( $(window).scroll(function() ( if ($(this).scrollTop() > 0) ( $("#arrowup").fadeIn(300); / /Tasten-Verschwindungsgeschwindigkeit ) else ( $("#arrowup").fadeOut(200); //Tasten-Erscheinungsgeschwindigkeit ) )); $("#arrowup").click(function() ( $("body,html" ).animate(( scrollTop: 0 ), 200); //Scrollgeschwindigkeit return false;
So verbergen Sie die „Nach oben“-Schaltfläche auf MobilgerätenViele Webmaster verbergen den „Aufwärts-Button“ bei der Anzeige einer Website auf Mobilgeräten, weil er unnötig ist. Um die Schaltfläche „Nach oben scrollen“ auf mobilen Geräten auszublenden, verwenden Sie die CSS-Medienabfrage @media (alles ist in derselben CSS-Datei style.css geschrieben):
@media only screen and (max-width: 568px) ( #arrowup (display: none;) )
Die Schaltfläche „Zurück zum Anfang“ für eine Website taucht seit 2010 auf vielen Websites und Blogs auf. Ist diese Schaltfläche nützlich und verwenden Benutzer sie? Sie nutzen es, aber nicht oft. Daher wird diese Schaltfläche normalerweise irgendwo am Rand der Website hinzugefügt (am häufigsten unten rechts).
Es gibt drei Implementierungen der oberen Schaltfläche. Natürlich kann jeder von ihnen weiter in einige Feinheiten unterteilt werden, aber es gibt drei Grundideen. Wir werden uns jeden von ihnen ansehen und unsere Einschätzung abgeben.
Möglichkeiten zum Implementieren einer Schaltfläche „Zurück zum Anfang“.Ich beginne mit der besten Methode (die Implementierungskomplexität ist mittel).
1. Basierend auf JavaScript und AJAX (JQuery)Das unten beschriebene Beispiel ist auf dieser Site implementiert.
Bei dieser Methode sollten wir einen tollen Button mit den folgenden Eigenschaften erhalten:
- Durch Drücken der Taste wird ein reibungsloser Übergang zum oberen Rand der Seite gewährleistet.
- die Schaltfläche wird transparent sein;
- es ist möglich, die Höhe in Pixel festzulegen, wann die Schaltfläche sichtbar wird;
Wenn Sie alles nach Anleitung machen, sollte es beim Erstellen des Buttons keine Probleme geben. Also, Schritt-für-Schritt-Anleitung:
A. Erstellen einer JS-Datei
Öffnen Sie einen beliebigen Notizblock (ich empfehle Notepad++), fügen Sie den folgenden Code ein und speichern Sie ihn mit der Erweiterung .js (z. B. gototop.js):
B. Stileinstellung
Fügen Sie der Stildatei den folgenden Code hinzu (die Stildatei ist eine Datei mit der Erweiterung .css). Meistens lautet der Name main.css oder style.css:
Anstelle von top.png müssen Sie die vollständige oder relative Adresse Ihres Bildes eingeben. Anstelle von 0px 0px und -56px 0px müssen Sie Ihre Offsets eingeben. Oder verwenden Sie keine Offsets, sondern verwenden Sie beim Klicken einfach ein anderes Bild.
C. Skripte mit der Site verbinden
Im obigen Beispiel haben wir die AJAX-Technologie verwendet, daher müssen wir die JQuery-Bibliothek einbinden. Sie müssen auch die Datei gototop.js einbinden, die Sie im ersten Absatz erstellt haben:
Und ganz unten auf der Website (vor dem Body-Tag) fügen Sie die Zeile hinzu:
Alle dafür notwendigen Dateien habe ich im Archiv gesammelt: gototop.rar
2. Button ohne AJAXDie Umsetzung dieser Methode ist sehr einfach bzw. könnte nicht einfacher sein. Darüber hinaus würde ich diese Methode sogar in zwei Untermethoden aufteilen.
2.1. Verwendung eines Link-AnkersOben auf der Website schreiben wir eine ID für ein Element. Es wäre logisch, es als Titel zu schreiben, da dies der Anfang des Inhalts ist. Und unten können Sie einen Link zum Anker platzieren. Der Code sieht etwa so aus:
... Artikelüberschrift...Die Nachteile dieser Methode sind erheblich:
- Die Schaltfläche „Zurück nach oben“ ist immer sichtbar, auch wenn sich der Benutzer bereits oben befindet
- Es ist notwendig, einen Anker zu registrieren. Dies ist möglicherweise nicht immer bequem
- Der Übergang nach oben ist abrupt (es gibt keine sanfte Bewegung)
Es gibt einen Vorteil: Es ist keine Verwendung von Skripten erforderlich.
2.2. Verwendung von JavaScriptDie JavaScript-Methode ist der vorherigen sehr ähnlich. Dieselbe Schaltfläche, nur dass wir diesmal nicht allen Seiten einen Anker hinzufügen müssen. Hier ist der Code:
...Der Stil kann wie in Beispiel 2.1 geschrieben werden.
Ich glaube, dass es besser ist, Methode 1 zu verwenden, da sie für den Benutzer einen angenehmeren visuellen Effekt hat, was in diesem Alter sehr wichtig ist
In diesem Tutorial erfahren Sie, wie Sie für lange Seiten eine eigene Schaltfläche „Nach oben scrollen“ erstellen. Die Implementierungsmethode ist sehr einfach. Sobald Sie den Dreh raus haben, können Sie die Schaltfläche „Nach oben scrollen“ nach Ihren Wünschen anpassen. Der Vorteil besteht darin, dass dieser Button auf dem beliebten jQuery-Framework implementiert ist, das auf fast jeder Website verwendet wird.
VorbereitungZuerst benötigen wir ein Bild des oberen Knopfes. Dazu können Sie einen beliebigen Pfeil herunterladen oder selbst zeichnen. Speichern Sie es als Pfeil. png . Wie Sie vielleicht schon erraten haben, wird dieses Bild unser Button nach oben sein.
CSS-Stile für die Schaltfläche „Zurück nach oben“.Legen Sie im Header der Seite oder in einer separaten CSS-Datei CSS-Stile für den div-Block mit id=scroller fest.
#scroller( Position: fest; /** Schaltflächenposition nach oben scrollen **/ unten: 30 Pixel; /** Schaltflächenbild nach oben**/ Hintergrund: transparente URL (Pfeil.png) keine Wiederholung links oben; Breite: 32 Pixel ; Höhe: 32px; Cursor: Zeiger; /** Schaltfläche am Anfang ausblenden **/ Anzeige: keine )
Wie Sie sehen, stellen wir zunächst die Blockposition auf eine feste Position ein. Sie können die Platzierung der Scroll-Schaltfläche nach oben mithilfe des unteren Werts ändern. Als nächstes legen wir den Hintergrund für unseren Pfeil fest, den wir im ersten Schritt vorbereitet haben. Abschließend blenden wir die Schaltfläche aus, sodass sie nicht sichtbar ist, wenn die Seite gerade geladen wird.
JavaScript-Code für die Schaltfläche „Zurück nach oben“.Wie erwartet schreiben wir den Skriptcode für die Schaltfläche in den Header-Abschnitt.
Verbinden wir zunächst die jQuery-Bibliothek. Dazu verwenden wir Google CDN. Sie können jedoch eine Verbindung über die offizielle jQuery-Website, Microsoft oder Ihren Server herstellen. Ich verwende Google CDN, meiner Meinung nach funktioniert es am schnellsten.
Nach dem Laden der jQuery-Bibliothek erstellen wir eine JavaScript-Funktion.
$(document).ready(function())( $(window).scroll(function () ( if ($(this).scrollTop() > 0) ( $("#scroller").fadeIn(); ) else ( $("#scroller").fadeOut(); ) ); $("#scroller").click(function () ( $("body,html").animate(( scrollTop: 0 ), 400) ; falsch zurückgeben; ));
Schauen wir uns den Code etwas später an ... Zuerst rufen wir die Funktion zum Laden der Seite auf:
$(document).ready(function())( ));
Im ersten Teil der Funktion setzen wir das Ereignis auf das Scroll-Ereignis. Wenn das Fenster gescrollt wird, ist der Wert der scrollTop-Variablen größer als 0. Zu diesem Zeitpunkt zeigen wir die Schaltfläche „Oben“ an. Wenn kein Scrollen stattfindet, blenden wir sie aus.
Im zweiten Teil der Funktion fügen wir einen Click-Event-Handler an die Schaltfläche zum Scrollen nach oben an. Wenn darauf geklickt wird, animieren wir das Scrollen zum Body-Tag. Das heißt, es erfolgt ein Scrollen zum Seitenanfang.
Damit ist die Erstellung des Basiscodes für die Schaltfläche „Zurück nach oben“ abgeschlossen!
Scrollen Sie nach oben zu den VerbesserungenIch hoffe, Sie haben tausende Ideen, wie Sie diesen Knopf schöner und besser gestalten können. Sie müssen lediglich Ihre eigenen Anpassungen an diesem Skript vornehmen. Beispielsweise können Sie beim Mouseover eine Änderung des Schaltflächenstils hinzufügen.
AbschließendDie 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!
Zurück nach obenUnser Code besteht aus zwei Teilen, CSS-Stilen und einem kleinen jQuery-Skript. Beginnen wir mit CSS.
CSS-Stile für die SchaltflächeWir 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.
Lassen Sie uns eine quadratische Schaltfläche mit 50 x 50 Pixel und abgerundeten Ecken mit 4 Pixel erstellen. 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.
Hinzufügen eines SymbolsDa 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.
Funktionalität mit jQuery hinzufügenIn 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.
Erscheinen und Verschwinden einer SchaltflächeHier 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 auf 300 Pixel gehen, fügen wir unserer Schaltfläche eine Show-Klasse hinzu, die sie erscheinen lässt. Wenn die Zahl kleiner als 300 ist, entfernen wir diese Klasse. Das Hinzufügen und Entfernen von Klassen ist ein weiterer Grund, warum jQuery so 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.
Aufstieg nach obenDer 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.
DemoDie 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.
FertigstellungDie 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!
