Jquery anchorfy

Posted   on Sunday, October 17 - 2010 (528 words)

jQuery anchorfy will create a linked list of all headings (h1, h2,…) within an element. It’s easy to use, fully customizable and supports scrolling animations.

So if you have a page layout with some headings in it like this:

1
2
3
4
5
6
<div class="example">
	<h3>A heading</h3>
	<p>Some very interesting text</p>
	<h3>Another heading</h3>
	<p>Boy this text is interesting!</p>
</div>

jQuery anchorfy then creates the following unordered list:

This does not look very sophisticated yet, does it? But naturally you can create a nice style with CSS. Check out this fancy example.

“Cool, but what’s it good for?” I hear you asking. Well, I use the plugin in my sidebar. This way one can directly jump to the subheadings of a long blog posts. Try it yourself! →

Installation

Download the package.

  • Copy the folders js and css of the downloaded package into the root directory of your website.

  • Add jQuery and the anchorfy plugin into the header of the page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<head>
...
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.anchorfy.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$('.example').anchorfy();
});
</script>
...
</head>

  • Change the name of the selector (here: example) in the above code to match an element inside your layout.

  • Create an element with class anchor between <body> and </body> where a list with all headings:

1
<div class="anchors"></div>

There are some example pages within the downloaded package. That’s it. Have fun!

Advanced settings

If you want you can also have your own markup and classes for your anchor links. Maybe you want the links within a table:

1
2
3
4
5
6
<script type="text/javascript" charset="utf-8">
$('.content').anchorfy({
	wrapperMarkup:	"<table class='anchorfy_wrapper' />",
	innerMarkup:	"<tr><td class='anchorfy_inner'></td></tr>"
});
</script>

Options

Options are specified as name: value pairs. Here is a list of customizable options:

animate [true|false] Animate scrolling to anchor
duration standard: 1500 Animation length in millisecods
ease ["swing"|...] Animation easing effect
anchorsElement CSS class (without dot) Where the anchor list will appear
anchorsPrefix 'String' Custom prefix of anchor name
anchorsSuffix 'String' Custom suffix of anchor name
wrapperClass CSS class (without dot) Name of container for links
innerClass CSS class (without dot) Name of item inside container
anchorMarkup HTML markup Custom markup for anchor
wrapperMarkup HTML markup Custom markup for link container
innerMarkup HTML markup Custom markup for link item

License

© Matthias Endler. Dual licensed under the MIT and GPL licenses. The text that is used for this example is borrowed from the great book “Why’s (poignant) Guide to Ruby”. The book and excerpt used in this example are distributed under the Creative Commons Attribution-ShareAlike license. Copyright © by why. The original version is offline. A mirror of the text can be found here.

More? Here's a list of all posts.
Feel free to copy, share and comment.
Tweet