jQuery: HTML Sprungmarken scrollen statt springen lassen

Sprungmarken (“anchor links”) sind nützlich, um innerhalb einer HTML-Seite direkt zu einem bestimmten Inhalt zu gelangen, ohne scrollen zu müssen. So kann z.B. eine “interne” Navigation für die Inhalte auf einer Seite realisiert werden. Allerdings sind diese Sprünge sehr abrupt und unschön anzusehen. Ein wenig schicker geht es z.B. mit Hilfe der allseits beliebten JavaScript-Bibliothek jQuery. Ein kleines Script, und das “Springen” wird zu einem sanften “Gleiten” – ein Augenschmaus ohnegleichen…

Für einen solchen Effekt benötigt man – neben dem jQuery-Core noch ein kleines Plugin von Ariel Flesler namens “jQuery.ScrollTo” – mehr Infos hier.

Neben der jQuery-Bibliothek und dem Plugin muss nun noch ein kleines Script geschrieben werden, dass ein Click-Event für alle Ankerlinks definiert. Das könnte in etwa so aussehen:

anchorLinks.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function($) {
  $(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
      //get the full url - like mysitecom/index.htm#home
      var full_url = this.href;
      //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
      var parts = full_url.split('#');
      var target = parts[1];
      // if the target is not empty and exists on this page, process the scrolling
      if(target && $('#' + target).offset()) {
        //prevent the default action for the click event
        event.preventDefault();
        //get the top offset of the target anchor
        var target_offset = $('#' + target).offset();
        var target_top = target_offset.top;
        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 500);
      }
    });
  });
})(jQuery);

Mittels jQuery werden zunächst alle Links mit einem Anker im href-Attribut selektiert. Daraufhin wird geprüft, ob das Linkziel auf der Seite überhaupt existiert. Ist dies der Fall, wird der Standard-Eventhandler (Springen zur Sprungmarke) unterdrückt und statt dessen ein netter Scroll-Effekt ausgeführt. Mittels des zweiten Parameters kann die Dauer des Effektes (also die Zeit, die zum Scrollen verwendet wird) in Millisekunden angegeben werden.

Eingebunden wird das Ganze dann in etwa wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de-DE" lang="de-DE" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ankerlinks scrollen mit Jquery</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
		<script type="text/javascript" src="anchorLinks.js"></script>
	</head>
	<body>
		<div id="navigation">
			<ul>
				<li><a href="#absatz1">Absatz 1</a></li>
				<li><a href="#absatz2">Absatz 2</a></li>
				<li><a href="#absatz3">Absatz 3</a></li>
				<li><a href="#absatz4">Absatz 4</a></li>
			</ul>
		</div>
		<div id="absatz1">
			<h1>Absatz 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam turpis, aliquet nec sagittis non, pellentesque mattis orci. Vestibulum fermentum urna vitae dui ullamcorper ut pretium massa lacinia. Nullam sagittis egestas orci, id tempor magna iaculis ut. Pellentesque quis massa nibh; sit amet cursus est. Fusce nunc leo, molestie quis aliquam ut, adipiscing ac lacus. Aenean at consequat arcu. Sed et lectus sit amet purus porta viverra sed at ante. In vitae cursus ante. Vestibulum vitae ligula in libero luctus mollis non in sem. Phasellus at imperdiet tortor.</p>
			<p>Vestibulum lacus diam, porta in ornare nec, scelerisque elementum urna. Donec eget risus eu orci molestie facilisis. Mauris eros ante, egestas sed ullamcorper vel, viverra id magna. Fusce vehicula sagittis gravida. Aliquam faucibus, purus nec mollis pharetra, felis eros tincidunt nisl, sed ultricies neque diam eget metus. Aenean mi erat, iaculis eu lobortis at, ultrices eu velit. Aliquam et sem ligula. Nam sed molestie sem. Ut egestas ipsum in ligula venenatis eget ultricies nunc mollis. Nullam imperdiet aliquam dui; non aliquet turpis facilisis ut. Maecenas molestie, est eget tristique sodales, ante justo facilisis metus, id tempus tellus massa eu enim. Suspendisse porta pretium ante non mattis? Integer libero felis, tempus id auctor convallis, scelerisque dictum diam! Nam ultrices tristique interdum. Pellentesque sit amet magna mauris. Fusce a nibh est. Mauris turpis diam, adipiscing vel ultrices eu, vulputate ut urna. Sed tortor dui, adipiscing a eleifend eget, lacinia nec augue.</p>
			<p>Vestibulum dolor ante, tincidunt non eleifend id; elementum eu turpis. Aliquam a commodo magna. Cras tempor aliquam quam, in eleifend orci tempus vitae. Maecenas rhoncus, dolor ac pulvinar ultrices, turpis tellus tristique nisi, imperdiet porta neque odio ac ante. Aliquam vehicula augue quis diam tincidunt pulvinar. Donec vitae tincidunt enim? Vestibulum magna dui, feugiat nec tempus in, faucibus sed nulla. Ut dignissim, lorem et fermentum eleifend, erat magna pharetra elit, quis gravida nisl mauris at enim. In hac habitasse platea dictumst. Etiam lacinia tristique eros sollicitudin auctor. Aenean quis est vitae orci pellentesque iaculis! Mauris molestie diam eget nibh rhoncus et sodales erat auctor. Quisque venenatis; lacus ac auctor mattis, orci libero commodo neque, quis blandit arcu nulla in ante. Suspendisse potenti. Integer porttitor consectetur sem vel aliquet. Donec sem nisl, adipiscing vitae faucibus at, interdum vehicula sem. Nullam placerat, magna in fringilla malesuada, lorem nisi interdum neque, nec suscipit augue justo non augue. Nam eu felis ante, non pharetra est. Nunc sed ipsum faucibus turpis varius mollis. Fusce nibh mi, ornare volutpat consequat ac, suscipit in sem.</p>
			<a href="#navigation">Nach oben</a>
		</div>
		<div id="absatz2">
			<h1>Absatz 2</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam turpis, aliquet nec sagittis non, pellentesque mattis orci. Vestibulum fermentum urna vitae dui ullamcorper ut pretium massa lacinia. Nullam sagittis egestas orci, id tempor magna iaculis ut. Pellentesque quis massa nibh; sit amet cursus est. Fusce nunc leo, molestie quis aliquam ut, adipiscing ac lacus. Aenean at consequat arcu. Sed et lectus sit amet purus porta viverra sed at ante. In vitae cursus ante. Vestibulum vitae ligula in libero luctus mollis non in sem. Phasellus at imperdiet tortor.</p>
			<p>Vestibulum lacus diam, porta in ornare nec, scelerisque elementum urna. Donec eget risus eu orci molestie facilisis. Mauris eros ante, egestas sed ullamcorper vel, viverra id magna. Fusce vehicula sagittis gravida. Aliquam faucibus, purus nec mollis pharetra, felis eros tincidunt nisl, sed ultricies neque diam eget metus. Aenean mi erat, iaculis eu lobortis at, ultrices eu velit. Aliquam et sem ligula. Nam sed molestie sem. Ut egestas ipsum in ligula venenatis eget ultricies nunc mollis. Nullam imperdiet aliquam dui; non aliquet turpis facilisis ut. Maecenas molestie, est eget tristique sodales, ante justo facilisis metus, id tempus tellus massa eu enim. Suspendisse porta pretium ante non mattis? Integer libero felis, tempus id auctor convallis, scelerisque dictum diam! Nam ultrices tristique interdum. Pellentesque sit amet magna mauris. Fusce a nibh est. Mauris turpis diam, adipiscing vel ultrices eu, vulputate ut urna. Sed tortor dui, adipiscing a eleifend eget, lacinia nec augue.</p>
			<p>Vestibulum dolor ante, tincidunt non eleifend id; elementum eu turpis. Aliquam a commodo magna. Cras tempor aliquam quam, in eleifend orci tempus vitae. Maecenas rhoncus, dolor ac pulvinar ultrices, turpis tellus tristique nisi, imperdiet porta neque odio ac ante. Aliquam vehicula augue quis diam tincidunt pulvinar. Donec vitae tincidunt enim? Vestibulum magna dui, feugiat nec tempus in, faucibus sed nulla. Ut dignissim, lorem et fermentum eleifend, erat magna pharetra elit, quis gravida nisl mauris at enim. In hac habitasse platea dictumst. Etiam lacinia tristique eros sollicitudin auctor. Aenean quis est vitae orci pellentesque iaculis! Mauris molestie diam eget nibh rhoncus et sodales erat auctor. Quisque venenatis; lacus ac auctor mattis, orci libero commodo neque, quis blandit arcu nulla in ante. Suspendisse potenti. Integer porttitor consectetur sem vel aliquet. Donec sem nisl, adipiscing vitae faucibus at, interdum vehicula sem. Nullam placerat, magna in fringilla malesuada, lorem nisi interdum neque, nec suscipit augue justo non augue. Nam eu felis ante, non pharetra est. Nunc sed ipsum faucibus turpis varius mollis. Fusce nibh mi, ornare volutpat consequat ac, suscipit in sem.</p>
			<a href="#navigation">Nach oben</a>
		</div>
		<div id="absatz3">
			<h1>Absatz 3</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam turpis, aliquet nec sagittis non, pellentesque mattis orci. Vestibulum fermentum urna vitae dui ullamcorper ut pretium massa lacinia. Nullam sagittis egestas orci, id tempor magna iaculis ut. Pellentesque quis massa nibh; sit amet cursus est. Fusce nunc leo, molestie quis aliquam ut, adipiscing ac lacus. Aenean at consequat arcu. Sed et lectus sit amet purus porta viverra sed at ante. In vitae cursus ante. Vestibulum vitae ligula in libero luctus mollis non in sem. Phasellus at imperdiet tortor.</p>
			<p>Vestibulum lacus diam, porta in ornare nec, scelerisque elementum urna. Donec eget risus eu orci molestie facilisis. Mauris eros ante, egestas sed ullamcorper vel, viverra id magna. Fusce vehicula sagittis gravida. Aliquam faucibus, purus nec mollis pharetra, felis eros tincidunt nisl, sed ultricies neque diam eget metus. Aenean mi erat, iaculis eu lobortis at, ultrices eu velit. Aliquam et sem ligula. Nam sed molestie sem. Ut egestas ipsum in ligula venenatis eget ultricies nunc mollis. Nullam imperdiet aliquam dui; non aliquet turpis facilisis ut. Maecenas molestie, est eget tristique sodales, ante justo facilisis metus, id tempus tellus massa eu enim. Suspendisse porta pretium ante non mattis? Integer libero felis, tempus id auctor convallis, scelerisque dictum diam! Nam ultrices tristique interdum. Pellentesque sit amet magna mauris. Fusce a nibh est. Mauris turpis diam, adipiscing vel ultrices eu, vulputate ut urna. Sed tortor dui, adipiscing a eleifend eget, lacinia nec augue.</p>
			<p>Vestibulum dolor ante, tincidunt non eleifend id; elementum eu turpis. Aliquam a commodo magna. Cras tempor aliquam quam, in eleifend orci tempus vitae. Maecenas rhoncus, dolor ac pulvinar ultrices, turpis tellus tristique nisi, imperdiet porta neque odio ac ante. Aliquam vehicula augue quis diam tincidunt pulvinar. Donec vitae tincidunt enim? Vestibulum magna dui, feugiat nec tempus in, faucibus sed nulla. Ut dignissim, lorem et fermentum eleifend, erat magna pharetra elit, quis gravida nisl mauris at enim. In hac habitasse platea dictumst. Etiam lacinia tristique eros sollicitudin auctor. Aenean quis est vitae orci pellentesque iaculis! Mauris molestie diam eget nibh rhoncus et sodales erat auctor. Quisque venenatis; lacus ac auctor mattis, orci libero commodo neque, quis blandit arcu nulla in ante. Suspendisse potenti. Integer porttitor consectetur sem vel aliquet. Donec sem nisl, adipiscing vitae faucibus at, interdum vehicula sem. Nullam placerat, magna in fringilla malesuada, lorem nisi interdum neque, nec suscipit augue justo non augue. Nam eu felis ante, non pharetra est. Nunc sed ipsum faucibus turpis varius mollis. Fusce nibh mi, ornare volutpat consequat ac, suscipit in sem.</p>
			<a href="#navigation">Nach oben</a>
		</div>
		<div id="absatz4">
			<h1>Absatz 4</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam turpis, aliquet nec sagittis non, pellentesque mattis orci. Vestibulum fermentum urna vitae dui ullamcorper ut pretium massa lacinia. Nullam sagittis egestas orci, id tempor magna iaculis ut. Pellentesque quis massa nibh; sit amet cursus est. Fusce nunc leo, molestie quis aliquam ut, adipiscing ac lacus. Aenean at consequat arcu. Sed et lectus sit amet purus porta viverra sed at ante. In vitae cursus ante. Vestibulum vitae ligula in libero luctus mollis non in sem. Phasellus at imperdiet tortor.</p>
			<p>Vestibulum lacus diam, porta in ornare nec, scelerisque elementum urna. Donec eget risus eu orci molestie facilisis. Mauris eros ante, egestas sed ullamcorper vel, viverra id magna. Fusce vehicula sagittis gravida. Aliquam faucibus, purus nec mollis pharetra, felis eros tincidunt nisl, sed ultricies neque diam eget metus. Aenean mi erat, iaculis eu lobortis at, ultrices eu velit. Aliquam et sem ligula. Nam sed molestie sem. Ut egestas ipsum in ligula venenatis eget ultricies nunc mollis. Nullam imperdiet aliquam dui; non aliquet turpis facilisis ut. Maecenas molestie, est eget tristique sodales, ante justo facilisis metus, id tempus tellus massa eu enim. Suspendisse porta pretium ante non mattis? Integer libero felis, tempus id auctor convallis, scelerisque dictum diam! Nam ultrices tristique interdum. Pellentesque sit amet magna mauris. Fusce a nibh est. Mauris turpis diam, adipiscing vel ultrices eu, vulputate ut urna. Sed tortor dui, adipiscing a eleifend eget, lacinia nec augue.</p>
			<p>Vestibulum dolor ante, tincidunt non eleifend id; elementum eu turpis. Aliquam a commodo magna. Cras tempor aliquam quam, in eleifend orci tempus vitae. Maecenas rhoncus, dolor ac pulvinar ultrices, turpis tellus tristique nisi, imperdiet porta neque odio ac ante. Aliquam vehicula augue quis diam tincidunt pulvinar. Donec vitae tincidunt enim? Vestibulum magna dui, feugiat nec tempus in, faucibus sed nulla. Ut dignissim, lorem et fermentum eleifend, erat magna pharetra elit, quis gravida nisl mauris at enim. In hac habitasse platea dictumst. Etiam lacinia tristique eros sollicitudin auctor. Aenean quis est vitae orci pellentesque iaculis! Mauris molestie diam eget nibh rhoncus et sodales erat auctor. Quisque venenatis; lacus ac auctor mattis, orci libero commodo neque, quis blandit arcu nulla in ante. Suspendisse potenti. Integer porttitor consectetur sem vel aliquet. Donec sem nisl, adipiscing vitae faucibus at, interdum vehicula sem. Nullam placerat, magna in fringilla malesuada, lorem nisi interdum neque, nec suscipit augue justo non augue. Nam eu felis ante, non pharetra est. Nunc sed ipsum faucibus turpis varius mollis. Fusce nibh mi, ornare volutpat consequat ac, suscipit in sem.</p>
			<a href="#navigation">Nach oben</a>
		</div>
	</body>
</html>

Viel Spaß beim Ausprobieren!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.