Remove unnecessary javascript code and replace with hugo template code

assets/css/content.scss

@@ -3,6 +3,7 @@ html {
   max-height: 100%;
   font-size: 62.5%;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {

assets/css/theme.scss

@@ -242,7 +242,6 @@ a.fn-item {
   margin: 0 auto;
 }
 
-
 /** ==========  Site footer ============ */
 .site-footer {
   background: var(--footer-color-background);

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,32 +30,14 @@ 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) {
+      e.preventDefault();
       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);
-      });
-    });
-
     $(".post.last").next(".post-after").hide();
     if ($sitehead.length) {
       $(window).scroll(function () {

layouts/index.html

@@ -35,7 +35,7 @@
                  <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>
@@ -44,18 +44,23 @@
 </header>
 
 <main class="content" role="main">
+    {{ $content := where $sections "Params.external" "==" nil }}
 
     <!-- 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 }}