add JavaScript for fragment jumper

2 files changed, 41 insertions, 4 deletions

diff --git a/preview-site-src/index.html b/preview-site-src/index.html
index e149f2f..8866334 100644
--- a/preview-site-src/index.html
+++ b/preview-site-src/index.html
@@ -15,7 +15,7 @@ Vis no velit audiam, sonet <a href="#dependencies">praesent</a> eum ne.
 <div class="paragraph">
 <p>Nominavi luptatum eos, an vim hinc philosophia intellegebat.
 Lorem <code>expetenda</code> pertinacia et nec, wisi illud sonet qui ea.
-Eum an doctus <a href="#">maiestatis efficiantur</a>.
+Eum an doctus <a href="#liber-recusabo">maiestatis efficiantur</a>.
 Eu mea inani iriure.</p>
 </div>
 <div class="listingblock">
@@ -65,7 +65,7 @@ gulp.task('js', () =&gt;
 </div>
 <div class="paragraph">
 <p>Cum dicat putant ne.
-Est in reque homero principes, meis deleniti mediocrem ad has.
+Est in <a href="#inline">reque</a> homero principes, meis deleniti mediocrem ad has.
 Altera atomorum his ex, has cu elitr melius propriae.
 Eos suscipit scaevola at.</p>
 </div>
@@ -240,7 +240,7 @@ Eos suscipit scaevola at.</p>
 </td>
 <td class="content">
 <div class="paragraph">
-<p>I wouldn&#8217;t try that if I were you.</p>
+<p id="inline">I wouldn&#8217;t try that if I were you.</p>
 </div>
 </td>
 </tr>
@@ -286,4 +286,4 @@ Altera atomorum his ex, has cu elitr melius propriae.
 Eos suscipit scaevola at.</p>
 </div>
 </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/js/02-fragment-jumper.js b/src/js/02-fragment-jumper.js
new file mode 100644
index 0000000..f680f75
--- /dev/null
+++ b/src/js/02-fragment-jumper.js
@@ -0,0 +1,37 @@
+;(function () {
+  'use strict'
+
+  var article = document.querySelector('article.doc')
+  var toolbar = document.querySelector('.toolbar')
+
+  function computePosition (el, sum) {
+    if (article.contains(el)) {
+      return computePosition(el.offsetParent, el.offsetTop + sum)
+    } else {
+      return sum
+    }
+  }
+
+  function jumpToAnchor (e) {
+    if (e) {
+      window.location.hash = '#' + this.id
+      e.preventDefault()
+    }
+    window.scrollTo(0, computePosition(this, 0) - toolbar.getBoundingClientRect().bottom)
+  }
+
+  window.addEventListener('load', function jumpOnLoad (e) {
+    var hash, target
+    if ((hash = window.location.hash) && (target = document.getElementById(hash.slice(1)))) {
+      jumpToAnchor.bind(target)()
+    }
+    window.removeEventListener('load', jumpOnLoad)
+  })
+
+  Array.prototype.slice.call(document.querySelectorAll('.doc a[href^="#"]')).forEach(function (el) {
+    var hash, target
+    if ((hash = el.hash.slice(1)) && (target = document.getElementById(hash))) {
+      el.addEventListener('click', jumpToAnchor.bind(target))
+    }
+  })
+})()