This page has been robot translated, sorry for typos if any. Original content here.

7 'Scroll to Top' Lösungen auf jQuery

7 Scroll to Top решений на jQuery

Die Schaltfläche " Nach oben scrollen" ist ein Add-on für Seiten mit vielen Inhalten und Blogs mit langen Beiträgen.

Die Notwendigkeit, Anker auf der Site zu verwenden, tritt sehr oft auf. Im Grunde werden sie in großen Webdokumenten verwendet, die Inhalt in Form von Links haben. Durch einen Klick auf einen solchen Link erfolgt ein sofortiger Übergang zum gewünschten Bereich der Seite. In diesem Artikel möchte ich zeigen, wie ein kleines Skript verwendet wird, um diesen Übergang reibungslos zu gestalten. Das heißt, anstelle eines sofortigen Übergangs wird die Seite problemlos zur richtigen Stelle verschoben. Und egal wo der Anker sein wird: über dem Link oder darunter.

In diesem Bereich finden Sie viele jQuery-Lösungen sowie One-Click-Lösungen, mit denen Ihre Besucher problemlos zum Anfang der Seite blättern können, wodurch Ihre Website benutzerfreundlicher wird.

Zuerst werden wir definieren, was Anker sind (plötzlich weiß jemand nicht). Anchor ist ein Lesezeichen mit einem eindeutigen Namen an einer bestimmten Stelle einer Webseite, mit dem ein Link erstellt werden soll.

Um einen Anker zu erstellen, sollten Sie zuerst ein Lesezeichen an der entsprechenden Stelle erstellen und ihm einen Namen unter Verwendung des Namensattributs des Tags geben oder einfach ein ID-Attribut einem Tag mit dem gewünschten Wert zuweisen (diese Methode wird häufiger verwendet, so dass das Skript darauf fokussiert). Sowohl im ersten als auch im zweiten Fall muss der Name des Ankers innerhalb der Seite eindeutig sein.

  <a name="razdel1"> </a>
 <div id = "# razdel1"> ... </ div>

Der href-Wert für den Übergang zu diesem Anker ist der Name des Lesezeichens mit dem vorangestellten Rautenzeichen (#).

 <a href="#razdel1"> zu Abschnitt 1 </a>

Lassen Sie uns zu weichen Übergängen zurückkehren. Daher sollte das Skript funktionieren, indem Sie auf die Links klicken, für die das href-Attribut mit dem Raster "#" beginnt. In jQuery können Sie es so machen:

  $ ('a [href ^ = "#"]'). click (function () {
  // ...
 });

Dann müssen Sie den Wert des href-Attributs in einer Variablen speichern:

 var target = $ (dieses) .attr ('href');

Um den Einzugswert des Scrollens von oben zu ändern, verwenden wir die Methode scrollTop . Die Glätte wird durch die Funktion animate implementiert. Dies ist die letzte Form unseres Scroll-Skripts:

  $ (Funktion () {
  $ ('a [href ^ = "#"]'). click (function () {
  var target = $ (dieses) .attr ('href');
  $ ('html, body'). animate ({scrollTop: $ (Ziel) .offset (). top}, 300);
  Rückgabe falsch; 
  }); 
 });

offset (). top bestimmt den Einzugswert für den Anfang des Ankers (mit der ID, die dem Wert des href-Attributs entspricht), die in scrollTop festgelegt ist . Vergessen Sie nicht, am Ende " false" zu setzen, um die Standardaktion abzubrechen. Jetzt müssen Sie nur diesen Code in die Seiten einfügen, die Sie benötigen (oder verbinden Sie es mit einer separaten Datei) und alles wird funktionieren. Viel Glück!

Zusätzliche Lösungen für reibungsloses Scrollen zum Link ...

1. jQuery topLink Plugin

topLink jQuery Plugin von David Walsh entwickelt, zeigt eine "up page" Popup-Taste, wenn der Benutzer die Website nach unten bewegt hat.

2. Fading Scroll to Top Link mit jQuery und CSS

Mit einer detaillierten Beschreibung zum Erstellen von gescrollt "auf Seite" basierend auf CSS und jQuery.

3. Fading Scroll to Top Link mit jQuery und CSS

Eine einfache Schaltfläche "auf der Seite" in der unteren rechten Ecke der Website. Der Code verwendet die Entwicklung der ersten beiden Scrolls und ist optimierter als die beiden vorherigen Lösungen, jedoch mit einer dämpfenden Wirkung und einem sanften Scrollen.

4. jQuery Plugin: Nach oben scrollen

Einfach zu installierendes jQuery-Skript, das mit normalem Scrollen animiertes Scrollen auf eine Website-Seite hinzufügt durch Bezugnahme.

5. UitoTop jQuery Plugin

Inspiriert von der großartigen Idee über David Walshs jQuery topLink Plugin, hat Matt Vaarone ein ähnliches Plugin erstellt, aber mit zwei großen Unterschieden, benötigt man hier kein extra HTML Markup oder zusätzliche Plugins. Diese Lösung funktioniert nur, wenn der Benutzer JavaScript aktiviert hat. Hier! Dieses Skript verwendet

6. jQuery Scrollen Sie zu Top Control v1.1

Dieses Skript zeigt ein stationäres Steuerelement in der unteren rechten Ecke der Site-Seite an, das beim Klicken sanft die Seite zurück nach oben scrollt. Anstatt immer auf dem Bildschirm des Benutzers sichtbar zu sein, können Sie mit dem Skript bestimmen, wie weit (in Pixeln) auf der Benutzerseite das Steuerelement angezeigt wird.

7. Glatte GoToTop WordPress-Plugin

Ein smooth Scrolling-Skript von Ariel Flesler und Mogosan Bogdan als Plugin für WordPress. Auf der Einstellungsseite des Plugins können Sie die CSS, die Fading-Geschwindigkeit und die minimale Höhe in Pixeln einstellen.