7 'Nach oben scrollen' mit jQuery-Lösungen

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

"Nach oben scrollen 'Button - Add-on für Seiten mit viel Inhalt und einem langen Blog - Post.

Die Notwendigkeit, die Anker vor Ort verwenden, ist sehr verbreitet. Im Allgemeinen sie in großen Web-Dokumenten verwendet werden, werden die Inhalte hier durch Bezugnahme aufgenommen ist. Durch einen Klick auf einen Link sofort zu einem bestimmten Abschnitt der Seite zu wechseln gehen. In diesem Artikel möchte ich zeigen, wie ein kleines Skript zu verwenden, um diesen Übergang zu glätten. Das heißt, anstatt eines momentanen Übergang, wird die Seite glatt an die richtige Stelle verschoben werden. Und egal, wo sie verankert werden: über oder unter den Links.

In diesem oben finden Sie eine Menge von jQuery Lösungen zu finden, sowie einen einzigen Klicks, die Ihre Besucher dann nach rechts, nach oben auf der Seite problemlos ermöglicht, so dass Ihre Website benutzerfreundlicher.

Zunächst bestimmen, daß ein solcher Anker (wenn jemand nicht weiß). Anchor Registerkarte mit einem eindeutigen Namen auf eine bestimmte Stelle Webseite genannt, entworfen, um einen Übergang zu es hier zu schaffen.

Um einen Anker erstellen muss zuerst ein Lesezeichen an der entsprechenden Stelle zu machen und geben Sie ihm einen Namen, den Namen Attribut des Tags verwenden oder einfach zuweisen jedes Tag ein id-Attribut auf den gewünschten Wert (diese Methode wird häufiger verwendet, so wird das Skript auf ihn gerichtet werden). Und in dem ersten und in dem zweiten Fall muss der Ankernamen innerhalb der Seite eindeutig sein. 

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

Da der Wert von href auf den Anker mit dem Lesezeichen-Namen mit einem Hash-Symbol (#) vor zu bewegen. 

 <a href="#razdel1"> Zum Kapitel 1 </a>

Lassen Sie uns zu einem reibungslosen Übergang zurück. Somit muss das Skript durch Klicken auf die Links, deren Attribut href beginnt mit einer Raute "#" ausgelöst werden. In jQuery können Sie dies: 

  $ ( 'A [href ^ = "#"] "). Klicken Sie auf (function () {
  // ...
 });

Dann müssen Sie den Wert des Attributs in der Variablen href zu halten: 

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

So ändern Sie den Einzug auf dem Scroll verwenden scrollTop Methode. Die Glätte der Funktion wird belebter realisiert werden. Ist hier ein letztes Mal unser Skript für flüssiges Scrollen ist: 

  $ (Function () {
  $ ( 'A [href ^ = "#"] "). Klicken Sie auf (function () {
  var target = $ (this) .attr ( 'href');
  $ ( 'Html, Körper') belebtes ({scrollTop: $ (Ziel) .Offset () nach oben.}, 300).
  return false; 
  }); 
 });

Offset (). Top-Einzug bestimmt den Wert des oberen Anker (mit einer ID gleich dem Wert des Attributs href), die in scrollTop gesetzt. Am Ende vergessen Sie nicht die return false zu setzen, die Standard - Aktion abzubrechen. Jetzt müssen Sie nur diesen Code auf die Termine Ihrer Seite einzufügen (oder eine separate Datei verbinden), und es wird funktionieren. Viel Glück!

Zusätzliche Lösungen für einen reibungslosen Blättern zum Link ...

1. jQuery Plugin Toplink

Toplink jQuery-Plugin entwickelt von David Walsh, ein Pop-up zeigt die "Seite nach oben", wenn der Benutzer die Seite nach unten verschoben.

2. Disappearing "Nach oben scrollen" Link mit jQuery und CSS

Eine detaillierte Beschreibung, wie zu bauen "auf Seite" blättern basiert auf CSS und jQuery.

3. Disappearing "Nach oben scrollen" Link mit jQuery und CSS

Einfache Schaltfläche "Seite nach oben" in der rechten Ecke der Website nizhenm. Der Code verwendet die Entwicklung der ersten beiden Spiralen und optimiert als die bisherigen zwei Lösungen, sondern mit dem Effekt der Dämpfung und gleichmäßiges Scrollen.

4. jQuery Plugin: Nach oben scrollen

Einfach zu installieren, jQuery-Skript, das blättern Sie auf die Seite der Website mit animierten Scrollen zum normalen fügt verschwinden Link.

5. UItoTop jQuery Plugin

Inspiriert durch den großen Idee in Bezug auf jQuery-Plugin von David Walsh Toplink Matt Veroun machte eine ähnliche Plug-in, aber zwei wesentliche Unterschiede auf, dies muss nicht arbeiten, haben Sie zusätzliche HTML-Markup oder zusätzliche Plug-Ins hinzugefügt. Diese Lösung würde nur funktionieren, wenn der Benutzer JavaScript aktiviert. Hier! Dieses Skript verwendet

6. jQuery Blättern Sie zu Top Control v1.1

Dieses Skript zeigt eine stationäre Kontrolle in der rechten unteren Ecke der Seite der Website, die, wenn sie sanft rollt wieder nach oben gedrückt. Statt auf dem Bildschirm des Benutzers sichtbar sein, immer mit, erlaubt das Skript angeben, wie weit unten (in Pixeln) auf der Seite des Benutzers, Show-Management.

7. Glatte gototop Wordpress - Plugin

Weiches Scrollen Skript entwickelt von Ariel Fleslerom und Mogosanu Bogdan als Plugin für Wordpress. In der Plugin-Einstellungen Seite, können Sie CSS, Fading-Rate und die minimale Höhe in Pixeln anzupassen.