Ein mit jQuery animiertes Scollen zu einem Link Anker, das im Gegensatz zum herkömmlichen Sprung, sehr sanft und elegant von statten geht, macht schon was her. Die nächsten Zeilen jQuery Code zeigen wie man diesen "smooth anchor scroll" Effekt umsetzen kann.
$(document).ready(function() {
// Angabe welcher Link mit entsprechender CSS Klasse für die Anker scroll
// Funktion genutzt werden soll
$('a.scroll').click(function(event) {
event.preventDefault();
var full_url = this.href;
var parts = full_url.split('#');
var trgt = parts[1];
var target_offset = $('#' + trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({
scrollTop: target_top
}, 500);
setTimeout(function() {
$('#' + trgt).addClass('scroll_activeTarget');
}, 500);
setTimeout(function() {
$('#' + trgt).removeClass('scroll_activeTarget').addClass('scroll_visitedTarget');
}, 5000);
setTimeout(function() {
$('#' + trgt).removeClass('scroll_visitedTarget');
}, 7000);
});
});Damit das jQuery Script zum sanften scrollen auch funktioniert, muss noch folgendes beachtet werden. Die Anchor scroll Funktion speichert man am besten in eine externe Datei, z.B. smoothe_anchor_scroll.js und bindet diese zusammen mit der JavaScript Library jQuery in ein HTML Dokument ein.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Smooth Anchor Scrolling</title>
<script src="jquery.min.js"></script>
<script src="smoothe_anchor_scroll.js"></script>
</head>
<body>
<a class="scroll" href="#ankerlink">Link zum Inhalt</a>
<div id="ankerlink" style="margin-top:1500px; padding:100px;">
Hier ist der Inhalt...
</div>
</body>
</html>jQuery kann man sich auch von Google aus einbinden. Hier der Link zu den Hosted Libraries von Google.
