Interne Links können auf herkömmliche Weise mit Hilfe von Ankern angesteuert werden. Dies erfolgt über das Ansprechen von Links, welche einen speziellen Namen erhalten haben:
<a name="anker">Lange Seite</a>
...
<a href="#anker">Seitenanfang</a>Mit jQuery können interne Verweise ohne die Platzierung von Ankerlinks genutzt werden. Dazu ist nur eine kleine Funktion notwendig und erledigt den Rest für uns. Durch die Funktion animate fahren wir die gewünschte Stelle langsam und nicht ruckartig an. Als Haltepunkt können IDs oder Klassen genutzt werden.
function smooth_scrolling (scrollTo) {
$(this).click(function (){
//Check if exists
if ($(scrollTo).length > 0) {
$('html, body').animate({
scrollTop: $(scrollTo).offset().top
}, 1000);
scrollTo = null;
}
return false;
});
}Die Ansprache dieser Funktion erfolgt über ein Linkelement:
<a href="#" id="click" onclick="smooth_scrolling('#div');">Klick mich</a>