Last active
May 29, 2019 20:47
-
-
Save manbearwolf/371b456de39908ed0719946d50c47783 to your computer and use it in GitHub Desktop.
AnchorJS Example https://github.com/bryanbraun/anchorjs
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
<script> | |
/** | |
* Example 1 | |
*/ | |
anchors.options = { | |
placement: 'right', | |
visible: 'hover', | |
}; | |
// Add anchors on DOMContentLoaded (Optionable... where you load it, you don't have to, that's as far back as it can go or so) | |
document.addEventListener("DOMContentLoaded", function(event) { | |
anchors.add('article h1, article h2, article h3') .remove('.no-anchor'); | |
}); | |
</script> |
Pre defined... (Semantic HTML5) (Sections... instead of headers)
<section id="section-1">
<h3 data-anchor-id="section-1">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
</section>
<!-- ... -->
<script>
anchors.add('h3');
</script>
or
generate a table of contents
with it (anchorJS)...
https://jsfiddle.net/bryanbraun/nc6rL9hk/
links
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
HTML5 Stuff
use article is best.
in posts.html works great in Jekyll.
https://www.w3schools.com/html/html5_semantic_elements.asp
https://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708