Merge pull request #104 from crowi/feature-modify-scroll-top

Added scroll top modifier

resource/css/_wiki.scss

@@ -131,10 +131,12 @@ div.body {
     }
   }
 
-  em.highlighted {
-    padding: 2px;
-    margin: 0 -2px;
-    font-weight: bold;
+  .highlighted {
+    &em {
+      padding: 2px;
+      margin: 0 -2px;
+      font-weight: bold;
+    }
     font-style: normal;
     color: #333;
     background-color: rgba(255,255,140,0.5);

resource/css/crowi.scss

@@ -174,6 +174,13 @@ footer {
     box-shadow: 0 0 2px rgba(0,0,0,.3);
   }
 }
+
+.highlighted {
+  color: #333;
+  background-color: rgba(255,255,140,0.5);
+  border-radius: 3px;
+}
+
 // components
 .flip-container { // {{{
   perspective: 1000;

resource/js/crowi.js

@@ -231,6 +231,30 @@ Crowi.userPicture = function (user) {
   }
 };
 
+Crowi.modifyScrollTop = function() {
+  var offset = 10;
+
+  var hash = window.location.hash;
+  if (hash === "") {
+    return;
+  }
+
+  var pageHeader = document.querySelector('#page-header');
+  var pageHeaderRect = pageHeader.getBoundingClientRect();
+
+  var sectionHeader = document.querySelector(hash);
+  if (sectionHeader === null) {
+    return;
+  }
+
+  var sectionHeaderRect = sectionHeader.getBoundingClientRect();
+  if (sectionHeaderRect.top >= pageHeaderRect.bottom) {
+    return;
+  }
+
+  window.scrollTo(0, (window.scrollY - pageHeaderRect.height - offset));
+}
+
 
 //CrowiSearcher = function(path, $el) {
 //  this.$el = $el;
@@ -896,3 +920,40 @@ $(function() {
   // for search
   //
 });
+
+Crowi.findHashFromUrl = function(url)
+{
+  var match;
+  if (match = url.match(/#(.+)$/)) {
+    return '#' + match[1];
+  }
+
+  return "";
+}
+
+Crowi.unhighlightSelectedSection = function(hash)
+{
+  if (!hash || hash == "") {
+    return true;
+  }
+  $(hash).removeClass('highlighted');
+}
+
+Crowi.highlightSelectedSection = function(hash)
+{
+  if (!hash || hash == "") {
+    return true;
+  }
+  $(hash).addClass('highlighted');
+}
+
+window.addEventListener('load', function(e) {
+  Crowi.highlightSelectedSection(location.hash);
+  Crowi.modifyScrollTop();
+});
+
+window.addEventListener('hashchange', function(e) {
+  Crowi.unhighlightSelectedSection(Crowi.findHashFromUrl(e.oldURL));
+  Crowi.highlightSelectedSection(Crowi.findHashFromUrl(e.newURL));
+  Crowi.modifyScrollTop();
+});