add JavaScript for fragment jumper

1 files changed, 37 insertions, 0 deletions

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))
+    }
+  })
+})()