Scroll to ID | Mit jQuery und Smooth Srolling zu einem definierten Anchor scrollen

Wir wollen auf einer OnePage oder auf einer einzelnen Seite einen speziellen Bereich ansprechen und mittels eines Links den User dort hin führen. Der einfachste Weg wäre dieser nicht sehr elegante Weg.

<a href="#ziel">Springe zu einer bestimmten Stelle</a>

<div id="ziel"></div>

Mit diesem recht simplen zwei Zeilen erreichen wir zwar unser Ziel jedoch springt der Browser automatisch nach unten oder eben, je nach dem welcher Bereich auf der Seite verlinkt wird. Dies kann sehr schnell zur Verwirrung führen für den User, da er das Gefühl dafür verliert wo er sich auf der Seite befindet. Speziell bei sehr langen Seiten kann dies erhebliche Nachteile auf die Usability der Seite haben.

Bessere User Experience mit jQuery Smooth Scrolling

Mit Hilfe von ein paar Zeilen jQuery ist es möglich eine Animation hinzuzufügen und so dem User mit Smooth Scrolling die Möglichkeit zu geben, visuell nachzuverfolgen wo der Link ihn hinführt.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({ scrollTop: target.offset().top -50 }, 500);
        return false;
      }
    }
  });
});

Dies ist ein schneller und einfacher Weg und kann auf jeder Webseite benutzt werden. Für die ganz unerfahrenen, sollte ich vielleicht noch erwähnen, dass jQuery natürlich eingebunden werden muss mittels eines Links. Entweder man ladet jQuery auf der Plattform http://jquery.com/ herunter und ladet jQuery dann wieder auf den eigenen Server oder man bindet jQuery über den Google Server ein. Diese Methode ist in fast allen Fällen zu bevorzugen. Der große Vorteil bei dieser Methode ist, dass in vielen Fällen der Browser die jQuery-Ressourcen erst gar nicht mehr laden muss, da viel Webseiten diese Ressourcen benutzen und die Chance groß ist, dass diese bereits im Browser Cache vorhanden ist.

jQuery über den eigenen Server einbinden

<script src="/scripts/jquery/jquery-1.11.0.min.js"  type="text/javascript" </script>

jQuery über den Google  Server einbinden

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" 
  type="text/javascript"></script>

jQuery Smooth Scrolling in WordPress

Natürlich funktioniert die oben beschriebene Methode auch in WordPress oder sonst irgendeinem CMS. Aber wie für alles gibt es auch hierfür Plugins um Smooth Scolling nutzen zu können. Wie immer empfehle ich wann nur möglich auf Plugins zu verzichten. Jedes Plugin ist eine weitere Belastung für den Server, oft ein Sicherheitsrisiko und es muss gewartet werden, selbst so kleine Plugins. Aber nichtsdestotrotz gibt es natürlich nette Plugins hierfür. Ich empfehle folgende zwei Wordpress Plugins:

 

Das war es auch schon. Sei es nun mit Plugins oder doch mittels dem sauberen Weg, das Ergebnis sollte auf jeden Fall das selbe sein. Bei Fragen wie immer einen Kommentar hinterlassen, ich versuche zeitnah zu antworten.

MEHR VON UNSEREN LEISTUNGEN

Slidebird Webdesign & Online Marketing devider

[Daniel Knoflicek, MSc] [Founder Slidebird Webstories] [Owner bestens.bar] [Brand Ambassador DESK.WORKS] [Shareholder Heart Club] [Inormatik TU Wien] [Online Media Marketing DUK] [Design] [Code] [Fitness] [Surfing] [Charles Bukowski] [Jean Paul Sartre ][Binge Watching] [Getting Wasted] …

daniel Knoflicek Autor

2 Gedanken zu “Scroll to ID | Mit jQuery und Smooth Srolling zu einem definierten Anchor scrollen”

  1. Ich hab genau nach so einem Artikel gesucht, super! Eine Frage nur, ich benutze WordPress und würde es gerne ohne Plugin hinbekommen. Ich kenn mich leider gar nicht aus, wo muss ich denn jQuery nun einbeinden? Also wo gehört dieser Link rein? lg Michael

    • Hallo Michael,

      also im Falle von WordPress musst du jQuery gar nicht einbinden, denn in WordPress ist es bereits out of the box eingebunden, ebenso jQuery UI, swfobject und scriptaculous. Sonst würdest du es in den Head deiner Seite geben. Also gleich nach dem öffnenden Tag.

Schreibe einen Kommentar