update url with hash while maintain smooth scroll (#297)

_includes/header.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
+<nav class="navbar navbar-expand-lg fixed-top navbar-dark" id="main-nav">
     <a class="navbar-brand" href="/" onclick="gaEvent('Nav Logo')">
         <i class="fa fa-shield"></i>
         <span class="hidden-sm"><strong>bit</strong>warden</span>

_includes/search.html

@@ -12,7 +12,7 @@
     </div>
 </header>
 <nav class="search-navbar navbar navbar-light bg-light">
-    <a class="search-sidebar-toggle d-block d-md-none py-2 px-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="menu" aria-expanded="true" aria-label="Toggle sidebar">
+    <a class="search-sidebar-toggle d-block d-md-none py-2 px-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="menu" aria-expanded="false" aria-label="Toggle sidebar">
         Contents
         <i class="fa fa-chevron-down ml-1"></i>
     </a>

_includes/sidebar.html

@@ -1,6 +1,6 @@
 {% assign sorted_articles = site.articles | sort: 'order' %}
 
-<nav class="bd-links collapse show" id="bd-docs-nav" aria-label="Main navigation">
+<nav class="bd-links collapse" id="bd-docs-nav" aria-label="Main navigation">
     <div class="bd-toc-item d-none d-sm-none d-md-block">
         <a class="bd-toc-link" href="/help/">
             Help Center

_scss/_all.scss

@@ -9,12 +9,12 @@ body {
     padding-top: $navbar-height;
 }
 
-// :target::before {
-//     content: '';
-//     display: block;
-//     height: $navbar-height + 5px;
-//     margin-top: -$navbar-height + 5px;
-// }
+:target::before {
+    content: '';
+    display: block;
+    height: $navbar-height + 5px;
+    margin-top: -$navbar-height + 5px;
+}
 
 a {
     color: $link-color;

js/bit.js

@@ -69,31 +69,25 @@ $(function () {
     });
 
     // smooth scrolling
-    $('a[href*="#"]').click(function(e) {
-        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-            var target = $(this.hash);
-            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+    $('a[href^="#"]').click(function () {
+        var target = $(this.hash);
+        var hash = this.hash;
 
-            if (target.length) {
-                e.preventDefault();
-                const NAVBAR_HEIGHT = 62 + 5;
+        if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
+        if (target.length == 0) target = $('html');
 
-                $('html, body').animate({
-                    scrollTop: target.offset().top - NAVBAR_HEIGHT
-                }, 500, function() {
-                    var $target = $(target);
-                    $target.focus();
-                    if ($target.is(":focus")) {
-                        return false;
-                    } else {
-                        $target.attr('tabindex','-1');
-                        $target.focus();
-                    };
-                });
+        $('html, body').animate({
+            scrollTop: target.offset().top - $('#main-nav').outerHeight()
+        }, 500, function () {
+            if (history.pushState) {
+                history.pushState(null, null, hash);
+            } else {
+                location.hash = hash;
             }
-        }
+        });
+        return false;
     });
 
-    // collapse
-    // $('.collapse').collapse()
+    // collapse sidebar
+    // $('#bd-docs-nav').toggleClass('show', $(window).width() > 1024);
 });