Neulich habe ich für eine Homepage einen “Back to top” Button umsetzen wollen. Das Szenario dafür ist klar definiert, man hat eine Seite die so hoch ist, dass ein Scrollbalken notwendig ist. zB durch folgendes CSS
#content {
height: 2000px;
}
Ganz unten auf der Seite folgt dann ein Link mit dem klingenden Titel “Back to top”, klickt der User darauf soll, ohne einen neuen Request abzuschicken, die Seite wieder von ganz oben weg angezeigt werden. Hier kommt JavaScript ins Spiel, und weil JavaScript browserübergreifend fehleranfällig ist, nutzt man am besten eine der beliebten Scriptbibliotheken. In meinem Fall ist das jQuery.
Diese bietet nicht nur das Springen auf den Seitenanfang an, nein wir können damit dem User das Scrollen visualisieren, indem wir das Scrollen direkt für ihn übernehmen, als würde er am Mausrad drehen. Dazu tauschen wir die Funktionalität des “back”-Links mit folgendem Konstrukt aus:
$(‘a[href=#]’).click(function(){
$(‘html’).animate({scrollTop: 0}, ‘slow’);
return false;
}
Wir animieren also die Position des HTML Elements um uns so einen Slideeffekt zu erzeugen. Das ‘return false’ ist notwendig, damit die Standardfunktionalität des Links nicht ausgeführt wird. Propagiert wird dies so in diversen Fachbüchern zu jQuery. Es funktionierte in meinem Fall auch wunderbar unter Firefox, doch unter Chrome stand der Bildausschnitt still.
Lösung: Dies liegt daran, dass Chrome die Seite im sogenannten Quirks Modus (http://de.wikipedia.org/wiki/Quirks-Modus) anzeigte. Dabei versucht der Browser eine gewisse Abwärtskompatibilität der Websites zus ichern um eventuell veralteten HTML Code auszugleichen. Damit das Scrollen nun auch im Quirks Modus funktioniert, wäre eine Selektion auf ‘body’ notwendig. Um ganz sicher zu gehen selektiert man gewöhnlich beides:
$(‘html,body’).animate({scrollTop: 0}, ‘slow’);
Das kann jedoch in manchen Opera Versionen zu Fehlern führen, da diese versuchen sowohl das HTML als auch das Body Element zur selben Zeit zu scrollen.
Wer auf der sicheren Seite sein mag oder gar komplexeres Scrollen, zB von Subelementen, einbauen mag, dem sei das jQuery Plugin ScrollTo empfohlen, dass nicht nur diesen Problemfall abdeckt sondern noch einige andere Szenarien ermöglicht. Natürlich auf Kosten von ein paar KB mehr Source den der User laden muss.
Aufgrufen wird der Scrolleffekt dabei so:
$.scrollTo(0,'slow');
Am besten schaut ihr euch das Plugin und die Möglichkeiten die es bietet selbst an: http://plugins.jquery.com/project/ScrollTo
Schreibe einen Kommentar