Automatic Header Links

I envied this little eye candy on some other blogs and it was easy to throw together.
 
image

If you’re on WordPress, a plugin like Simple Custom CSS and JS comes in handy for stuff like this.

CSS

a.headerLink:hover {
  color: inherit;
  opacity: 1;
}
a.headerLink {
  position: relative;
  transition: opacity 0.5s ease-in-out;
  cursor: pointer;
  opacity: .2;
}
a.headerLink i.fa {
  position: absolute;
  left: -1.5em;
}
a.headerLink:focus {
  color: inherit !important;
}

JS

  $(':header:not("[class]")').each(function(idx, el){
    var l = $(el);
    var name = l.text().replace(/\W+/g, "");
    l.prepend('<a name="'+name+'" class="headerLink" href=#'+name+'><i class="fa fa-chain"></i></a>');
  });

Leave a Reply