Auto Link Injection

Automagically convert all h and dt tags with ids into linkable things. Also accounts for scrollspy enabled bootstrap fixed-top navbar

HTML

<div class="nav">
  <h1>
  Hello World
  </h1>
</div>
<div class="nav">
  <h1>
  Hello World
  </h1>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-4">
            <h1 id="testh1">Gets link</h1>
            <h2>no link</h2>
            <h2 id="testh2">Gets link</h2>
            <h3 id="testh3">Gets link</h3>
            <h4 id="testh4">Gets link</h4>
            <h5 id="testh5">Gets link</h5>
            <h6 id="testh6">Gets link</h6>
            <dl>
            <dt id="testdt">Gets link</dt>
            <dd>no link</dd>
            </dl>
        </div>
    </div>
</div>

CSS

/* make room for the nav bar */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
dt[id]{
	padding-top: 60px;
	margin-top: -40px;
}

.header-anchor {
  position: absolute;
  opacity: 0;
  padding: 0 5px 0 10px;
  height: 100%;
  width: 20px;
  color: #000;
  -webkit-transition: opacity 0.3s ease-in-out 0s;
  -moz-transition: opacity 0.3s ease-in-out 0s;
  transition: opacity 0.3s ease-in-out 0s;
}

.header-anchor .glyphicon {
	top 0;
}

h1 .header-anchor {
  left: -40px;
}

h2 .header-anchor {
  left: -35px;
}

h3 .header-anchor {
  left: -30px;
}

h4 .header-anchor {
  left: -26px;
}

h5 .header-anchor {
  left: -23px;
}

h6 .header-anchor {
  left: -21px;
}

dt .header-anchor {
  left: -16px;
}

h1:hover .header-anchor,
h2:hover .header-anchor,
h3:hover .header-anchor,
h4:hover .header-anchor,
h5:hover .header-anchor,
h6:hover .header-anchor,
dt:hover .header-anchor{
  opacity: 1;
}

JavaScript

//programmatically injecting this is so much easier than writing the html by hand 376 times...
	$('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id]').each(function(i){
		$(this).prepend(['<a class="header-anchor" href="#', this.id, '"><span class="glyphicon glyphicon-link"></span></a>'].join(''));
	});