Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
For every heading in your page, this adds a little anchor link `#` that you can click to get a permalink to the heading. No dependency on jQuery or anything else. Requires that your headings already have an `id` attribute set (because that's what jekyll does)To use it, just drop it in the layout you use for your blog pages. You can style `.deepL…
(function(){
'use strict';
/*
Create intra-page links
Requires that your headings already have an `id` attribute set (because that's what jekyll does)
For every heading in your page, this adds a little anchor link `#` that you can click to get a permalink to the heading.
Ignores `h1`, because you should only have one per page.
The text content of the tag is used to generate the link, so it will fail "gracefully-ish" if you have duplicate heading text.
*/
var headingNodes = [], results, link,
tags = ['h2', 'h3', 'h4', 'h5', 'h6'];
tags.forEach(function(tag){
results = document.getElementsByTagName(tag);
Array.prototype.push.apply(headingNodes, results);
});
headingNodes.forEach(function(node){
link = document.createElement('a');
link.className = 'deepLink';
link.textContent = '';
link.href = '#' + node.getAttribute('id');
node.appendChild(link);
});
})();
@SimplGy

This comment has been minimized.

Copy link
Owner Author

commented May 14, 2015

Similar to http://ben.balter.com/2014/03/13/pages-anchor-links/, but created separately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.