Only use jQuery animate if native smooth scrolling is not supported

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

assets/css/theme.scss

@@ -108,6 +108,7 @@ body {
     -moz-transition: all ease 0.3s;
 
     &:hover {
+      color: inherit;
       opacity: 0.9;
     }
   }

assets/js/index.js

@@ -30,15 +30,23 @@ var $sitehead = $("#site-head");
     }
   }
   $(document).ready(function () {
-    $("a.btn.site-menu").click(function (e) {
-      e.preventDefault();
-      srcToAnchorWithTitle($(e.target).data("title-anchor"));
-    });
-    $("#header-arrow").click(function () {
-      srcTo($first);
-    });
+    // 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();

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 }}
@@ -38,14 +39,15 @@
                  <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">
-    {{ $content := where $sections "Params.external" "==" nil }}
-
     <!-- Render sticky left navigation menu -->
     <div class='fixed-nav'>
         {{ range $index_val, $elem_val := $content }}