TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich ein Scroll-to-Top-Widget für deine Website?

65

Zurück nach oben oder nach oben scrollen ist die Funktion, mit der Sie zum Anfang einer Seite wechseln können, indem Sie auf einen Pfeil klicken, der sich normalerweise in der unteren rechten Ecke der Seite befindet. Es ist immer nicht erforderlich, ein Bild für eine solche Funktion zum Scrollen nach oben zu verwenden. Da jedes Bild eine separate HTTP-Anfrage an Ihren Server sendet, summiert sich die Gesamtladezeit der Site und das Anpassen des Bildes ist auch nicht sehr einfach. Um dies zu überwinden, bieten wir das unten stehende Widget zum Scrollen nach oben mit CSS und jQuery mit einem fantastischen Schriftsymbol anstelle eines Bildes an, damit Sie es an das Layout Ihrer Website anpassen können.

Verwandte: Wie füge ich ein Scroll-to-Top-Widget auf der Weebly-Site hinzu?

Das Widget enthält drei Teile:

  • CSS
  • Skript
  • HTML

1 CSS-Code für das Zurück zum Anfang Widget

Unten ist der CSS-Code für das Widget und fügen Sie diesen in den Header-Bereich Ihrer Website ein.

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Hinweis: Anstelle von Bildern verwenden wir das Font Awesome Icon, daher ist das erforderliche CSS entsprechend verlinkt.

2 jQuery-Skript für das Widget

Unten ist das Skript für das Widget, das im Fußbereich Ihrer Website platziert werden muss.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

3 HTML für das Widget

Und schließlich unten ist der HTML-Code, der in den Body Ihrer Webseite eingefügt werden muss, um die Back-to-Top-Funktion zu aktivieren.

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

Anpassen der Back-to-Top-Funktionen

Der Vorteil bei der Verwendung dieses Widgets besteht darin, dass Sie die gesamte Funktion nach Ihren Bedürfnissen anpassen können. Hier sind einige der Anpassungsoptionen für Sie:

Scroll-Geschwindigkeit

Die Standardgeschwindigkeit des Scrollens ist im Skript auf 600 eingestellt, die Sie erhöhen oder verringern können.

Besonderheit Code Wo zu suchen
Scroll-Geschwindigkeit var-Dauer = 600; Skript

Anzeigeposition des scrollenden Symbols

Das Pfeilsymbol wird angezeigt, wenn sich die Bildlaufleiste an der Position 200px von oben befindet, die im Skript mit dem folgenden Code definiert ist:

Besonderheit Code Wo zu suchen
Startposition des scrollenden Symbols wurde versetzt = 200; Skript

Sie können die Startposition nach Bedarf ändern.

Position des Symbols

Standardmäßig wird das Symbol mit dem Pfeil nach oben 60 Pixel nach oben und 55 Pixel entfernt von der unteren rechten Ecke angezeigt, wie im CSS-Stil definiert. Sie können es nach der Trial-and-Error-Methode ändern, um die geeignete Position für Ihre Site zu überprüfen.

Besonderheit Code Wo zu suchen
Position des Bildlaufsymbols in der unteren rechten Ecke Breite: 55px;Höhe: 60px; Stil

Symbolstil

Wir haben das Schriftart-Icon "fa-arrow-circle-up" verwendet, das Sie im HTML-Code ändern können.

Besonderheit Code Wo zu suchen
Zurück zum Anfang Symbolstil <i class=”fa fa-Pfeil-Kreis-oben”></i> HTML

Beziehen Sie sich auf den Abschnitt Richtungssymbole der Liste der fantastischen Schriftarten, um alternative Symbole für Ihre Website zu verwenden.

Symbolgröße

Als Schriftgröße für das Symbol im CSS-Stil wird standardmäßig 50px verwendet, die Sie nach Bedarf ändern können.

Besonderheit Code Wo zu suchen
Zurück zum Anfang Symbolgröße Schriftgröße: 50px; Stil

Symbolfarbe

Dies ist der wichtigste Teil der Anpassung, bei dem die Farbe des Schriftsymbols leicht an das Layout Ihrer Website angepasst werden kann. Suchen Sie nach dem Code „Farbe: #808080;” im CSS-Code und ändern Sie ihn nach Bedarf in eine beliebige Farbe.

Besonderheit Code Wo zu suchen
Zurück zum Anfang Symbolfarbe Farbe: #808080; Stil

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen