Startseite Skripte für das Wintersemester 2017/18 Webdesign Responsive Images, Transitions & Javascript Sanftes Scrollen innerhalb einer HTML-Seite

Sanftes Scrollen innerhalb einer HTML-Seite

Auf langen HTML-Seiten macht es Sinn, Zwischenüberschriften einzufügen und diese mit einer ID (#Name) zu versehen. Dann kann man ein Menü erstellen und zu den Überschriften linken:

HTML

<!-- der Link -->
<a href="#k-2">Kapitel 2</a>

<!-- der Anchor mit ID als Ziel -->
<h4 id="k-2">Kapitel 2</h4>

<!-- Ziel beim Scrollen ganz nach oben  -->
<body id="top">

<!-- Link im Footer zum Hochscrollen -->
<footer>
    <a href="#top">nach oben ↑</a>
</footer>

Schaut Euch dazu die Demo an!

Sanftes Scrollen dank Javascript

Mittels Javascript kann man eine Funktion einbauen, die automatisch alle Links, die als Ziel ein „#…“ haben, sanft anscrollt:

Javascript

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
// http://stackoverflow.com/questions/16475198/jquery-scrolltop-animation
// nur die Links, die mit "#" anfangen, werden beachtet
// auch hier könnt Ihr einfach den Code bei Euren Sachen verwenden
// Ihr braucht daran nichts ändern!
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500); // 500 (0.5sek) legt Geschwindkeit fest
    }

});

</script>

Schaut Euch dazu die Demo an – oder ladet Euch die Datei herunter!

→ Begriff suchen