Smooth Scolling mit jquery Wordpress

jQuery Smooth Scrolling Problemstellung

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.

Daniel Knoflicek ist seit 2012 Geschäftsführer von Slidebird Webstories, einer Agentur für online Marketing, Webdesign und Webentwicklung. Des Weiteren hat Daniel Knoflicek das Start Up Ernst M. gegründet, welches vegane, bio Marmelade in Österreich herstellet und vertreibt. Er ist als CTO für das Start Up tätig. Seit 2015 und der Gründung von DESK.WORKS ist Daniel Knoflicek als Brand Ambassador für Österreich zuständig.

Comments

  • Avatar for Michael
    Michael

    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

    19. Juni 2018

Sorry, the comment form is closed at this time.