Fix JUMP TO (linode#1713)

* Fix JUMP TO

* use var

* Account for header in scroll and scroll to section not header

* remove uneeded function

* Call without timeout

* Use scrollTop and offsetHeight instead

docs/scss/docs/Layout.scss

@@ -3,14 +3,14 @@ $sidebar-width: 250px;
 .Layout {
     background-color: $gray;
 
-    &-container,
     &-navigationContainer,
     &-content {
-        height: 100%;
+        min-height: 100%;
     }
 
     &-container {
-        padding-top: $nav-height;
+        min-height: calc(100% - #{$nav-height});
+        margin-top: $nav-height;
     }
 
     &-navigationContainer {

docs/scss/layout.scss

@@ -2,5 +2,5 @@ html,
 body,
 #root,
 [data-reactroot] {
-    height: 100%;
+    min-height: 100%;
 }

docs/src/App.js

@@ -29,11 +29,35 @@ function logPageView() {
   ReactGA.pageview(window.location.pathname);
 }
 
+// https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604
+function hashLinkScroll() {
+  const { hash } = window.location;
+  if (hash !== '') {
+    // Push onto callback queue so it runs after the DOM is updated,
+    // this is required when navigating from a different page so that
+    // the element is rendered on the page before trying to getElementById.
+    setTimeout(() => {
+      const id = hash.replace('#', '');
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollTop = element.offsetHeight;
+      }
+    }, 0);
+  }
+}
+
+function onRouterUpdate() {
+  logPageView();
+  hashLinkScroll();
+}
+
 export function init() {
+  hashLinkScroll();
+
   render(
     <Router
       history={browserHistory}
-      onUpdate={logPageView}
+      onUpdate={onRouterUpdate}
     >
       <Route path="/" component={Layout} endpoints={api.endpoints}>
         <Route component={IndexLayout}>

docs/src/components/Endpoint.js

@@ -29,7 +29,7 @@ export default function Endpoint(props) {
             {methods.map(function(method, index) {
               return (
                 <li key={index}>
-                  <Link to={`#${method.name}`}>{method.name}</Link>
+                  <a href={`#${method.name}`}>{method.name}</a>
                 </li>
               );
             })}

docs/src/components/Method.js

@@ -81,7 +81,7 @@ export default function Method(props) {
   }
 
   return (
-    <div className="Method">
+    <div id={name} className="Method">
       <h2>{name}</h2>
       <div className="Method-section">
         <p className="Method-description">{description}</p>