Last active
October 31, 2022 17:20
-
-
Save SimplGy/a229d25cdb19d7f21231 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Similar to http://ben.balter.com/2014/03/13/pages-anchor-links/, but created separately.