Um den Scrolleffekt von Section zu Section beim Klick auf einen Button zu ermöglichen, verwende ich die Open Source JavaScript Bibliothek jQuery.

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. [...] jQuery is free, open source software, licensed under the MIT License. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

- jQuery (Wikipedia)

Folgender Code ermöglicht das Scrollen von Section zu Section:


<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

function goToByScroll(id) {
id = id.substring(0, id.indexOf("-"));
$('html,body').animate({scrollTop: $("#"+id).offset().top}, 1000);
}

$(".scroll-link").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
goToByScroll($(this).attr("id"));
});
});
//]]>
</script>


Ein beispielhafter Button, der den jQuery Code aufruft sieht folgendermaßen aus:


<a id="second-link" class="scroll-link" href="#">...</a>


Was passiert nun im jQuery Code?

1. Es wird ein Click-Listener auf alle HTML-Elemente mit der Klasse "scroll-link" gesezt.
2. Beim Click auf einen solchen Link wird die Funktion "goToByScroll" mit dem Wert des Attributs "id" als Übergabeparameter aufgerufen.
3. In der Funktion wird der übergebene String beschnitten, sodass nur noch der Teil vor dem Ersten Auftreten von "-" übrig bleibt.
4. Abschließend wird die jQuery Funktion "animate" aufgerufen und zum Element mit der ID (=beschnittene Zeichenkette) innerhalb von x (hier 1000) Millisekunden gescrollt.