Sanfter Bildlauf mit jQuery zu einer variablen ID

Ich stand die Tage vor einem recht interessanten Problem. Durch einige Anpassungen an meinem Blog wollte ich ein sanftes Scrollen mittels jQuery zu meinen Kommentaren erzielen. Das ist im Grunde wenig schwer. Vor rund einem Jahr bloggte ich über eine sehr simple Lösung, um den Sprung zum Seitenanfang zu animieren. Diese Lösung klappt auch prima für ID’s. Anstelle scrollTop: 0 wird die Null durch die ID, offset() und “top” ersetzt — $('#ID').offset().top. In meinem jetzigen Fall sah das Ganze etwas anders aus. Meine ID’s haben keinen festen Wert. Sie beginnen mit “C”, gefolgt von einer Zahl. Zusätzlich soll der Startpunkt auch gleichzeitig der Endpunkt sein. Was macht das für einen Sinn? Ganz einfach, weil es schicker rüberkommt. Aufgabe: Versuche die variable ID als Ausgangspunkt anzusprechen und den genauen ID-Wert auszulesen, damit das Ziel schlussendlich stimmt.

Die Problem-Beschreibung klingt schwieriger, als das funktionierende Ergebnis. Damit ihr mein Vorgehen besser nachvollziehen könnt, gehe ich tiefer ins Detail. Fangen wir zunächst mit dem Einstiegspunkt an. Dieser kann relativ simpel definiert werden. jQuery versteht CSS-Angaben an dieser Stelle wunderbar. Unser Selektor schaut daher wie folgt aus: $('a[id^=c]'). Schritt 1 wäre damit erledigt. Nun kommt der “komplexere” Teil. Wir benötigen eine Funktion, die in der Lage ist, die aktuell geklickte ID auszugeben. Hierzu bietet jQuery verschiedene Möglichkeiten, manche besser als andere:

  • $(this).attr("id")
  • this.id
  • $(this).append("Clicked")
  • event.target.id

Kurz um, ich habe mich für this.id entschieden. Zum einen ist der Aufruf sehr kurz und zugleich verdammt schnell. Verglichen mit $(this).attr("id") beinahe 40-mal flotter. Um die Ausgabe zu testen, basteln wir uns eine erste kleine Funktion. Dabei allerdings beachten, dass später eine Variable benötigt wird. Also legen wir das auch gleich so an.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('a[id^=c]').click(function(){
var cID = $('#'+this.id);
alert(cID);
return false;});</script>

Beim anschließenden Ausführen wirft uns das Popup-Fenster die anvisierte ID zurück. Okay, nun muss das Konstrukt nur noch korrekt umgewandelt werden, damit das sanfte Scrollen funktioniert. Denn so, klappt’s nicht. Der Trick ist es, den kleinen Rattenschwanz hinter scrollTop in eine Variable zu verfrachten. Folglich entsteht folgendes Quellcode-Snippet:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('a[id^=c]').click(function(){
var cID = $('#'+this.id).offset().top;
$("html, body").animate({ scrollTop: cID}, 800);
return false;});</script>

Wie ihr seht, kann jQuery manchmal ganz easy sein und sogar mit nur wenigen Zeilen Quellcode ein doch recht komplex wirkendes Problem beseitigen. Diese Lösung eignet sich beispielsweise prima für Kommentar-Sprungmarken oder andere Elemente, wo die ID einen veränderlichen Wert aufweist. Ich für meinen Teil finde es immer wieder faszinierend, zu was jQuery fähig ist.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

2 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von ThorstenS · · #

    Hi Markus,
    ich lese deinen Blog regelmäßig und freue mich immer wieder über deine ausführlichen Posts zu “webasteleien”.

    Danke, mach bitte weiter so!
    /thorsten

  2. Kommentar von reraiseace · · #

    Hallo Thorsten,

    danke für dein Feedback :-) Auch in Zukunft werde ich verstärkt auf Inhalte aus dem Bereich Webdesign setzen.