diff --git a/assets/css/content.scss b/assets/css/content.scss
index 3dc9825..6c23ca8 100644
--- a/assets/css/content.scss
+++ b/assets/css/content.scss
@@ -3,6 +3,7 @@ html {
   max-height: 100%;
   font-size: 62.5%;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {
diff --git a/assets/css/theme.scss b/assets/css/theme.scss
index d935894..7604944 100644
--- a/assets/css/theme.scss
+++ b/assets/css/theme.scss
@@ -108,6 +108,7 @@ body {
     -moz-transition: all ease 0.3s;
 
     &:hover {
+      color: inherit;
       opacity: 0.9;
     }
   }
@@ -242,7 +243,6 @@ a.fn-item {
   margin: 0 auto;
 }
 
-
 /** ==========  Site footer ============ */
 .site-footer {
   background: var(--footer-color-background);
diff --git a/assets/js/index.js b/assets/js/index.js
index bf3859f..110abcd 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -7,7 +7,6 @@ var $first = $(".post.first");
 var $last = $(".post.last");
 var $fnav = $(".fixed-nav");
 var $postholder = $(".post-holder");
-var $postafter = $(".post-after");
 var $sitehead = $("#site-head");
 
 /* Globals jQuery, document */
@@ -31,33 +30,23 @@ var $sitehead = $("#site-head");
     }
   }
   $(document).ready(function () {
-    $postafter.each(function (e) {
-      var bg = $(this).parent().css("background-color");
-      $(this).css("border-top-color", bg);
-    });
-
-    $("a.btn.site-menu").click(function (e) {
-      srcToAnchorWithTitle($(e.target).data("title-anchor"));
-    });
-    $("#header-arrow").click(function () {
-      srcTo($first);
-    });
-
-    $(".post-title").each(function () {
-      var t = $(this).data("fnav-title");
-      var index = $(this).parents(".post-holder").index();
-      var postId = $(this).closest("article.post").attr('id');
-      $fnav.append(
-        "<a class='fn-item' item_index='" + index + "' data-post-id='" + postId + "'>" + t + "</a>"
-      );
-      $(".fn-item").click(function () {
-        var postId = $(this).data("post-id");
-        var s = $("#" + postId);
-        srcTo(s, 200);
+    // fallback to jQuery animate if smooth scrolling is not supported
+    if (!"scrollBehavior" in document.documentElement.style) {
+      // Cover buttons
+      $("a.btn.site-menu").click(function (e) {
+        e.preventDefault();
+        srcToAnchorWithTitle($(e.target).data("title-anchor"));
       });
-    });
+
+      // cover arrow button
+      $("#header-arrow").click(function (e) {
+        e.preventDefault()
+        srcTo($first);
+      });
+    }
 
     $(".post.last").next(".post-after").hide();
+
     if ($sitehead.length) {
       $(window).scroll(function () {
         var w = $(window).scrollTop();
diff --git a/layouts/index.html b/layouts/index.html
index b9e978f..ef173ce 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,6 +2,7 @@
 {{ $headless := .Site.GetPage "/homepage" }}
 {{ $sections := $headless.Resources.ByType "page" }}
 {{ $sections := cond .Site.BuildDrafts $sections (where $sections "Draft" "==" false) }}
+{{ $content := where $sections "Params.external" "==" nil }}
 
 <!-- Welcome screen that scrolls out of view -->
 {{ if not .Params.header_use_video }}
@@ -32,30 +33,36 @@
               {{ with .Params.header_menu_title }}{{ $button_title = . }}{{ end }}
 
               {{ if isset .Params "external" }}
-                 <a class='btn site-menu' href='{{ .Params.external  }}'>{{ $button_title }}&nbsp;<icon class="fa fa-external-link"></icon></a>
+                 <a class='btn site-menu' href='{{ .Params.external }}'>{{ $button_title }}&nbsp;<icon class="fa fa-external-link"></icon></a>
               {{ else }}
                 {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
-                 <a class='btn site-menu' data-title-anchor='{{ anchorize $fnav_title }}'>{{ $button_title }}</a>
+                 <a class='btn site-menu' data-title-anchor='{{ anchorize $fnav_title }}' href='#{{ anchorize $fnav_title }}'>{{ $button_title }}</a>
               {{ end }}
             {{ end }}
-            <i id='header-arrow' class="fa fa-angle-down"></i>
+            {{ with (index $content 0) }}
+                {{ $first_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $first_title = . }}{{ end }}
+                <a id='header-arrow' href="#{{- anchorize $first_title -}}" aria-label="Go to first section"><i class="fa fa-angle-down"></i></a>
+            {{ end }}
         </div>
     </div>
 </header>
 
 <main class="content" role="main">
-
     <!-- Render sticky left navigation menu -->
-    <div class='fixed-nav'></div>
+    <div class='fixed-nav'>
+        {{ range $index_val, $elem_val := $content }}
+            {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
+            <a class='fn-item' item_index='{{ (add $index_val 1) }}' href='#{{ anchorize $fnav_title }}'>{{ $fnav_title | safeHTML }}</a>
+        {{ end }}
+    </div>
 
     <!-- Render single-page content -->
-    {{ $content := where $sections "Params.external" "==" nil }}
     {{ range $index_val, $elem_val := $content }}
         {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
         <div class='post-holder{{ if and (ne .Site.Params.invertSectionColors true) (not (modBool $index_val 2)) }} dark{{ else if and (eq .Site.Params.invertSectionColors true) (modBool $index_val 2) }} dark{{ end }}'>
             <article id='{{ anchorize $fnav_title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $content) }}last{{ end }}'>
                 <header class="post-header">
-                    <h2 class="post-title" data-fnav-title="{{ $fnav_title | safeHTMLAttr }}">{{ .Title | safeHTML }}</h2>
+                    <h2 class="post-title">{{ .Title | safeHTML }}</h2>
                 </header>
                 <section class="post-content">
                     {{ .Content }}