jQuery Plugin To Create Footnotes With Subscript Numbers - Footnoted

Footnoted is a jQuery footnote/endnote plugin that easily add superscript footnote numbers to text that automatically link to corresponding footnotes at the bottom of the page. Footnotes have a link to take you back to your previous reading position. Also makes a Top link after the footnotes.

How to use it:

1. Include the jQuery javascript library in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Add superscript footnote numbers to text using <sup> tag with class .footnoted.

<sup class="footnoted"></sup>

3. Create the footnotes at the bottom of your main content.

<ol id="footnotes">
<li>Footnote 1</li>
<li>Footnote 2</li>
<li>Footnote 3</li>
..
<!-- top link will go here -->
</ol>

4. The javasript.

<script>
$(document).ready(function() {

// make a link out of any <sup> with class .footnoted
$('.footnoted').each(function(i){
var superscript = i+1;
$(this).html('<a>' + superscript + '</a>');
});

// give <sup class="footnoted"> an id to scroll back to
$('.footnoted').each(function(i){
this.id = "reading-position-"+(i+1);
});

// tell the superscripts where to go
$('.footnoted a').each(function(i){
this.href = "#footnote-"+(i+1);
});

// set a target for the superscripts to scroll to
// if you're not using a list for your footnotes, change li to the correct selector
$('#footnotes li').each(function(i){
this.id = "footnote-"+(i+1);
});

// add return to reading position link at the end of the footnote
$('#footnotes li').append('<span class="return-to-reading footnoted" style="display:none;"><a> &uarr; Back to reading position</a></span>');

// give the return to position url an href of the target ID
$('#footnotes span a').each(function(i){
this.href = "#reading-position-"+(i+1);
});

// make a back to top link at the end of your footnotes
// if you're not using a list for your footnotes, change li to the correct selector
$('#footnotes li').last().after('<li id="back-to-top"><a>&uarr;&nbsp;&nbsp;Back to top</a></li>');

// scroll back to the top
$('#back-to-top').click(function() {
$("html, body").animate({ scrollTop: 0 }, "fast");
});

// smooth scroll between reading position and footnotes
$('.footnoted a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top - 20
}, 500, 'swing', function () {
window.location.hash = target;
});

// remove class and link to previous reading position from other <li> if you scrolled to a footnote previously
$('.current-footnote span').remove();
$('#footnotes li').removeClass('current-footnote');

// add return to reading position link and give the current footnote a class for additional styles
$(target).addClass('current-footnote');
$('.current-footnote span').css('display', 'inline');
});

});
</script>

4. Style the footnotes and <sup> tag in the CSS.

ol {
...
}
li {
...
}
sup.footnoted {
vertical-align: super;
...
}

sup.footnoted a {
...
}
#back-to-top {
...
}

---

This awesome jQuery plugin is developed by jheftmann. For more Advanced Usages, please check the demo page or visit the official website.