Manch einem wird es auf verschiedenen Webseiten bereits begegnet sein: ein sanfter Bildlauf hin zu einem beliebigen Element auf der Webseite. Vorteil gegenüber dem normalen direkten Sprung ist, dass man so dem Benutzer auch offenbaren kann, wohin genau ihn die Reise denn führt. Das kann durchaus positive Auswirkungen auf das Zurechtfinden in der Struktur der eigenen Seite haben.
Auf jeden Fall ist es ein netter Effekt, der sich recht schnell und praktisch mit wenigen Codezeilen in JQuery umsetzen lässt.

 
$(document).ready(function(){
 
  $('#link').click( function(e) {
 
    e.preventDefault();
    $('html,body').animate({
       scrollTop: $("#element").offset().top
    }, 1000 );
 
  });
 
}); // document.ready

Was passiert hier?

Zunächst wird mittels

$(document).ready(function(){
}); // document.ready

gewartet bis das HTML-Dokument vollständig geladen ist. Erst anschließend wird der Code innerhalb dieses Blocks ausgeführt.

$('#link').click( function(e) {
 e.preventDefault();
});

Hierbei wird dem Link mit der ID link der Eventhandler click zugefügt. Das heißt im Klartext, dass der Codeblock nur ausgeführt wird, wenn auf den Link mit dieser ID geklickt wird. Ist das der Fall wird an dieser Stelle verhindert, dass die standardmäßig mit dem Klick verknüpfte Aktion ausgeführt wird. Hier also der Sprung zum verlinkten Element. Hier wollen wir ja stattdessen unsere ScrollTo-Aktion ansetzen. Das geschieht im folgenden:

$('html,body').animate({
}, 1000 );

Nun fügen wir dem HTML und BODY-Tag eine Animationsfunktion zu, die uns von JQuery zur Verfügung gestellt wird. Da nicht alle Browser den HTML-Tag hier richtig erkennen, bedarf es hier zusätzlich des Body-Tags. Die Animation soll hier 1000ms andauern. Hier lassen sich natürlich auch andere Werte einstellen.

scrollTop: $("#element").offset().top

Nun scrollen wir zum Tag mit der zugewiesenen ID element. Die Funktion offset() gibt uns dabei die Position des Elements an. Dabei werden sowohl die Position relativ zum Dokument von oben (top), als auch die von links (left) zurückgegeben. Hier interessiert uns jedoch nur die top-Position.