fix: avoid obscuring heading behind navbar when following permalinks (#630)

Fixes #629.
Ref #588.

Author: Krinkle

styles/components/anchors.less

@@ -75,23 +75,8 @@ h1, h2, h3 {
   }
 }
 
-
-// Offset
-// ----------------------------------------------
-// anchor targets are invisible and set the specified
-// distance above headings and anchors. This is what
-// ensures that our headings won't overlap the navbar.
-// If you require clickable anchors, you can
-// achieve this with fewer classes and less HTML
-
-.anchor-target {
-  position: absolute;
-  margin-top: -(@anchor-distance);
-  padding-top: @anchor-distance;
-  width: 2px;
-}
-
-.anchor-target-small {
-  margin-top: -(@anchor-distance-small);
-  padding-top: @anchor-distance-small;
+// anchor targets are invisible anchors for compatibility with
+// previous headings and URLs that have been moved or renamed.
+h1, h2, h3, .anchor-target {
+  scroll-margin-top: @anchor-distance;
 }

templates/_plugins/navigation.js

@@ -99,11 +99,7 @@ module.exports = function navigationPlugin(params, callback) {
     $(navOpts.id || '#navigation').append(buildHTML(navigation, true));
 
 
-    var anchorTemplate = [
-        '<span class="anchor-target" id="<%= id %>"></span>',
-        '<a href="#<%= id %>" name="<%= id %>" class="anchor glyphicon glyphicon-link"></a>'
-    ].join('\n');
-
+    var anchorTemplate = '<a href="#<%= id %>" class="anchor glyphicon glyphicon-link"></a>';
 
     // If an anchor template is specified in the options, use that instead.
     if (anchorOpts && anchorOpts.template) {
@@ -115,14 +111,10 @@ module.exports = function navigationPlugin(params, callback) {
         var $e = $(e);
         var id = $e.attr('id');
 
-        // Anchor template
         var anchor = template(anchorTemplate, {
             id: id
         });
         $(this).prepend(anchor);
-
-        // Adjust heading
-        // $(this).removeAttr('id').addClass('docs-heading');
         $(this).addClass('docs-heading');
 
         // if ($(this).prev().children().hasClass('source-link')) {