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

Schaltfläche "Nach oben scrollen" - eine Ergänzung für Seiten mit vielen Inhalten und Blogs mit langen Nachrichten.

Die Notwendigkeit, Anker auf der Website zu verwenden, tritt sehr oft auf. Im Grunde werden sie in großen Webdokumenten verwendet, die Inhalt in Form von Links haben. Durch Klicken auf einen solchen Link erfolgt ein sofortiger Übergang zu dem gewünschten Abschnitt der Seite. In diesem Artikel möchte ich zeigen, wie man diesen Übergang mit einem kleinen Skript glatt macht. Das heißt, anstelle eines sofortigen Übergangs blättert die Seite sanft zum gewünschten Ort. Und es spielt keine Rolle, wo der Anker sein wird: über dem Link oder darunter.

In diesem Top finden Sie eine Vielzahl von jQuery-Lösungen sowie One-Click-Lösungen, mit denen Ihre Besucher problemlos bis zum oberen Rand der Seite scrollen können, wodurch Ihre Website benutzerfreundlicher wird.

Zuerst definieren wir, was ein Anker ist (plötzlich weiß jemand nicht). Ein Anker ist ein Lesezeichen mit einem eindeutigen Namen an einer bestimmten Stelle auf der Webseite, die dazu dient, durch Referenz darauf zu springen.

Um einen Anker zu erstellen, machen Sie zuerst ein Lesezeichen an der entsprechenden Stelle und vergeben Sie einen Namen mit dem name-Attribut des Tags oder weisen Sie einem Tag einfach ein id-Attribut mit dem gewünschten Wert zu (diese Methode wird häufiger verwendet, sodass das Skript darauf ausgerichtet ist). In beiden Fällen muss der Name des Ankers innerhalb der Seite eindeutig sein.

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

Der href-Wert für den Sprung zu diesem Anker ist der Name des Lesezeichens mit dem Gittersymbol (#) davor.

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

Lassen Sie uns zu weichen Übergängen zurückkehren. Das Skript sollte also funktionieren, indem Sie auf die Links klicken, deren href-Attribut mit dem Raster "#" beginnt. In jQuery können Sie dies tun:

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

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

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

Um den Wert des Bildlaufeinzugs von oben zu ändern, verwenden wir die scrollTop- Methode. Glätte wird durch animierte Funktion realisiert. Hier ist unser letztes Skript zum reibungslosen Scrollen:

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

offset (). top gibt den Wert des oberen Rands für den Anker an (mit der ID, die dem href-Attributwert entspricht), die auf scrollTop festgelegt ist . Vergessen Sie am Ende nicht, false zurückzusetzen , um die Standardaktion rückgängig zu machen. 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 zu einem Link ...

1. jQuery topLink Plugin

Das topLink jQuery-Plugin, das von David Walsh entwickelt wurde, zeigt eine Popup-Schaltfläche "auf der Seite", wenn der Benutzer die Site nach unten bewegt hat.

2. Der verschwindende "Scroll to top" -Link mit jQuery und CSS

Mit einer detaillierten Beschreibung zum Erstellen eines Scrollens "auf der Seite" basierend auf CSS und jQuery.

3. Disappearing "Scroll to top" -Link mit jQuery und CSS

Ein einfacher Knopf "auf der Seite" in der rechten unteren Ecke der Website. Der Code verwendet die Entwicklung der ersten beiden Scrolls und ist besser optimiert als die beiden vorherigen Lösungen, jedoch mit dem Effekt von Fading und weichem Scrollen.

4. jQuery Plugin: Nach oben scrollen

Einfach zu installierendes jQuery-Skript, das auf einer Seite der Site mit einem animierten Scrollen mit normalem Bild ein verschwindendes Scrollen ermöglicht Referenz.

5. UitoTop jQuery Plugin

Inspiriert von der großartigen Idee von jQuery von David Walsh topLink Plugin, hat Matt Veroone ein ähnliches Plug-in erstellt, aber mit zwei Hauptunterschieden, dieses erfordert keine Arbeit, sodass Sie zusätzliches HTML-Markup oder zusätzliche Plug-Ins hinzufügen können. Diese Lösung funktioniert nur, wenn der JavaScript-Benutzer aktiviert ist. Hier! Dieses Skript verwendet

6. jQuery Scrollen Sie zu Top Control v1.1

Dieses Skript zeigt das stationäre Steuerelement in der unteren rechten Ecke der Seite der Site an, das bei gedrückter Maustaste 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 die Steuerung angezeigt wird.

7. Glatte GoToTop WordPress-Plugin

Ein reibungsloses Scroll-Skript, das von Ariel Flesler und Mohosan Bogdan als Plug-in für WordPress entwickelt wurde. Auf der Seite mit den Plug-in-Einstellungen können Sie css, die Verdeckungsgeschwindigkeit und die Mindesthöhe in Pixeln konfigurieren.