fix onpage anchors to be able to deal with the fixed header, fixes #26

_layouts/default.html

@@ -133,25 +133,10 @@
   </script>
   <script src="/js/vendor/jquery.js"></script>
   <script src="/js/vendor/jquery-ajax-localstorage-cache.js"></script>
+  <script src="/js/vendor/jquery.fixed-header.js"></script>
   <script src="/js/main.js"></script>
   <script type="text/javascript">
-  var $win = $(window);
-  var $wrap = $('.header-links-wrap');
-  var height = parseInt($wrap.css('top'), 10);
-  $win.on('scroll', function() {
-    var scrollTop = $win.scrollTop();
-    if (scrollTop > height) {
-      $wrap.css({
-        position: 'fixed',
-        top: '0px'
-      });
-    } else {
-      $wrap.css({
-        position: 'absolute',
-        top: height + 'px'
-      });
-    }
-  });
+
   </script>
 </body>
 </html>

hack.md

@@ -8,7 +8,7 @@ title: Hacker Guide
 The guide will help you to get started with NodeCopter hacking in any
 programming language.
 
-<ol>
+<ol class="toc">
   <li><a href="#drone">The Drone</a></li>
   <li><a href="#buy">Buying a drone</a></li>
   <li>

js/vendor/jquery.fixed-header.js

@@ -0,0 +1,51 @@
+$(function() {
+  var $win = $(window);
+  var $wrap = $('.header-links-wrap');
+  var height = parseInt($wrap.css('top'), 10);
+  $win.on('scroll', function() {
+    var scrollTop = $win.scrollTop();
+    if (scrollTop > height) {
+      $wrap.css({
+        position: 'fixed',
+        top: '0px'
+      });
+    } else {
+      $wrap.css({
+        position: 'absolute',
+        top: height + 'px'
+      });
+    }
+  });
+
+  // fix onpage anchors
+  $('a').click(function(e) {
+    if ($(this).attr('href').indexOf('#') !== -1) {
+      e.preventDefault();
+
+      $('html, body').animate({
+          scrollTop: $($(this).attr('href')).offset().top - 70
+      }, 200);
+
+      var href = window.location.href;
+      var pos = href.indexOf('#');
+      if (pos === -1) {
+        window.location.href += $(this).attr('href');
+      } else {
+        window.location.href = href.substr(0, pos) + $(this).attr('href');
+      }
+    }
+  });
+
+  // scroll to the proper anchor if the browser location contains a hashbang
+  var href = window.location.href;
+  var pos  = href.indexOf('#');
+  if (pos !== -1) {
+    var name = href.substr(pos + 1);
+    var $target = $('#' + name);
+    if ($target.length > 0) {
+      $('html, body').animate({
+          scrollTop: $target.offset().top - 100
+      }, 200);
+    }
+  }
+});

organize.md

@@ -6,7 +6,7 @@ title: Organizing a NodeCopter event
 <h2 id="organizing"><a href="#organizing">Organizing a NodeCopter event</a></h2>
 Interested in organizing your own NodeCopter event? Read this page to find out how.
 
-<ol>
+<ol class="toc">
   <li><a href="#organize-introduction">Introduction</a></li>
   <li><a href="#qualifications">Qualifications</a></li>
   <li><a href="#values">Core Values</a></li>