Site Anchors, supporting information and code for my corresponding blog post. https://edm00se.io/web/site-anchors/

About.md

Anchor Links

The implementation, as described in my blog, its implementation of site anchors/links.

Modeled on the approach laid out here: http://ben.balter.com/2014/03/13/pages-anchor-links/

anchors.css

/*
  * Applies the styles only to elements of .header-link inside of the .post-body, meaning that the rest of my blog's elements will be unaffected.
  */
.post-body .header-link {
  left: -3rem; /* moves the anchor link to the left of the actual header */
  opacity: 0; /* sets default state to not be shown */
  transition: opacity 0.2s ease-in-out 0.1s; /* fancy fading in effect */
  -webkit-transition: opacity 0.2s ease-in-out 0.1s; /* some vendor-specific implementations of the transition property */
  -moz-transition: opacity 0.2s ease-in-out 0.1s;
  -ms-transition: opacity 0.2s ease-in-out 0.1s;
}

/*
 * Defining the showing of the anchor/header links on hover of the h* elements, that are within the .post-body div.
 */
.post-body h1:hover .header-link,
.post-body h2:hover .header-link,
.post-body h3:hover .header-link,
.post-body h4:hover .header-link,
.post-body h5:hover .header-link,
.post-body h6:hover .header-link {
  opacity: 1; /* show the site anchor */
}

anchors.js

/*
 * The corresponding JavaScript component, which only creates the link element in the DOM,
 * with the correct reference to the Font Awesome icon and CSS style class.
 */
 $(document).ready(function() {
  return $("h2, h3, h4, h5, h6").each(function(i, el) { /* find the h* elements */
    var $el, icon, id;
    $el = $(el); /* get a handle on the current element */
    id = $el.attr('id'); /* grab its id attribute */
    icon = '<i class="fa fa-link"></i>'; /* define the icon w/ Font Awesome to be added */
    if (id) {
      return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon)); /* create the link by prepending it to the h* tag */
    }
  });
});