Smooth scrolling.

Author: sebadoom

src/website/editor/utils.js

@@ -1,4 +1,5 @@
 import { tokenEditor } from './instances.js';
+import { isWideScreen } from '../utils.js';
 import { 
   algorithmSelect, 
   publicKeyTextArea,
@@ -28,7 +29,7 @@ export function copyTokenLink() {
 }
 
 export function fixEditorHeight() {
-  if(window.matchMedia('(min-width: 768px)').matches) {
+  if(isWideScreen()) {
     editorElement.style.height = `${decodedElement.offsetHeight}px`;
   }
 }

src/website/index.js

@@ -7,11 +7,12 @@ import {
   useDefaultToken
 } from './editor';
 import { setupJwtCounter } from './counter.js';
-import { getParameterByName } from './utils.js';
+import { getParameterByName, smoothScrollTo } from './utils.js';
 import { 
   publicKeyTextArea, 
   codeElements, 
-  debuggerSection
+  debuggerSection,
+  menuScrollableLinks
 } from './dom-elements.js';
 
 import hljs from 'highlight.js';
@@ -70,8 +71,21 @@ function setupHighlighting() {
 }
 
 function setupSmoothScrolling() {
-  //TODO
-  console.log('TODO: smooth scrolling');
+  Array.prototype.forEach.call(menuScrollableLinks, scrollable => {
+    scrollable.addEventListener('click', event => {
+      event.preventDefault();
+
+      const start = scrollable.href.indexOf('#');
+      if(start === -1) {
+        console.error('<a> element with .scrollto set and bad link: ', 
+                      scrollable.href);
+        return;
+      }
+
+      const id = scrollable.href.substr(start + 1);
+      smoothScrollTo(document.getElementById(id));
+    });
+  });
 }
 
 // Initialization

src/website/utils.js

@@ -1,3 +1,5 @@
+import { navbarElement } from './dom-elements.js';
+
 export function safeLocalStorageSetItem(key, value) {
   try {
     localStorage.setItem(key, value);
@@ -103,3 +105,27 @@ export function isInViewport(elem) {
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
   );
 };
+
+export function isWideScreen() {
+  return window.matchMedia('(min-width: 768px)').matches;
+}
+
+// This is the only function that really requires jQuery, other than some
+// of the dependencies. Consider this when adding code that depends on
+// jQuery somewhere else.
+export function smoothScrollTo(element) {
+  // TODO: don't use jQuery
+  
+  const navHeight = $(navbarElement).height();
+  const targetElement = $(element);
+
+  if (isWideScreen()) {
+    $('html, body').animate({
+      scrollTop: targetElement.offset().top - navHeight
+    }, 500);
+  } else {
+    $('html, body').animate({
+      scrollTop: targetElement.offset().top
+    }, 500);
+  }
+}

stylus/app.styl

@@ -56,6 +56,9 @@ a
   &:hover
     color: darken(#00b9f1, 50%)
 
+p
+  margin 30px 0 30px 0
+
 .container
   width 100%
   max-width 1200px