improved version

Author: bedroesb

_includes/toc.html

@@ -1,16 +1,14 @@
 <script>
   $(document).ready(function () {
     // Ensure that the TOC is generated after the document is fully loaded
-    $('#toc-contents').toc({ 
-      minimumHeaders: {{site.theme_variables.toc.min_headings | default: 1 }},
+    $('#toc-contents').toc({
+      minimumHeaders: {{ site.theme_variables.toc.min_headings | default: 1 }},
       listType: 'ul',
       classes: { list: 'list-unstyled' },
-      noBackToTopLinks: true,
       showSpeed: 0,
       headers: '{{site.theme_variables.toc.headings | default: "main h2" }}',
       title: '<strong class="my-2">On this page</strong><hr class="my-2">' 
     });
-
     // After generating the TOC, check the hash in the URL and scroll to the anchor if present
     if (window.location.hash) {
       var target = $(window.location.hash);
@@ -20,6 +18,19 @@
         }, 0);
       }
     }
+    // Allow the browser to handle the scrolling to the anchor
+    $('#toc-contents a').on('click', function (e) {
+      e.preventDefault(); // Prevent the default link click behavior
+
+      var target = this.hash; // Get the hash (e.g., #heading-id)
+      var $target = $(target); // Find the element with the corresponding ID
+
+      if ($target.length) {
+        // Change the URL hash
+        window.location.hash = target;
+      }
+    });
+
   });
 </script>
 <button id="btn-toc-hide" class="btn bg-light d-xl-none hover-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#toc-contents" aria-expanded="true" aria-controls="toc-contents">

assets/js/toc.js

@@ -2,7 +2,6 @@
 (function ($) {
   $.fn.toc = function (options) {
     var defaults = {
-      noBackToTopLinks: false,
       title: '<i>Jump to...</i>',
       minimumHeaders: 3,
       headers: 'h1, h2, h3, h4, h5, h6',
@@ -35,7 +34,9 @@
         this.id = $(this).text().trim().replace(/\s+/g, '-').toLowerCase();
       }
       return this.id;
-    }), output = $(this);
+    });
+
+    var output = $(this);
 
     // Check if there are any headers
     if (!headers.length || headers.length < settings.minimumHeaders || !output.length) {
@@ -59,16 +60,11 @@
 
     var get_level = function (ele) { return parseInt(ele.nodeName.replace("H", ""), 10); };
     var highest_level = headers.map(function (_, ele) { return get_level(ele); }).get().sort()[0];
-    var return_to_top = '<i class="icon-arrow-up back-to-top"> </i>';
+    var level = get_level(headers[0]), this_level;
+    var html = settings.title + " <" + settings.listType + " class=\"" + settings.classes.list + "\">";
 
-    var level = get_level(headers[0]),
-        this_level,
-        html = settings.title + " <" + settings.listType + " class=\"" + settings.classes.list + "\">";
     headers.each(function (_, header) {
       this_level = get_level(header);
-      if (!settings.noBackToTopLinks && this_level === highest_level) {
-        $(header).addClass('top-level-header').after(return_to_top);
-      }
       if (this_level === level) { // same level as before; same indenting
         html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
       } else if (this_level <= level) { // higher level than before; end parent ol
@@ -86,14 +82,6 @@
       level = this_level; // update for the next one
     });
     html += "</" + settings.listType + ">";
-
-    if (!settings.noBackToTopLinks) {
-      $(document).on('click', '.back-to-top', function () {
-        $(window).scrollTop(0);
-        window.location.hash = '';
-      });
-    }
-
     render[settings.showEffect]();
   };
 })(jQuery);