Fix: back to top button js

docs/components/back-to-top-button.md

@@ -15,7 +15,7 @@ eleventyNavigation:
 
 - Insert it at the bottom of the root element in the page.
 - Don’t remove the text in the button. Screen readers need it.
-- It appears after the user has scrolled down, usually four times the height of the screen’s initially-visible portion.
+- It appears after the user has scrolled down.
 - The `href` of the button should be the `id` of the `<main>` element.
 
 ## Usage

docs/js/default.js

@@ -1,11 +1,18 @@
+// ============================================================================
+// DOM ELEMENT REFERENCES
+// ============================================================================
 let pageWrapper = document.getElementById("page-wrapper");
 let sidebar = document.getElementById("sidebar");
 let sidebarButton = document.getElementById("sidebar-button");
 let sidebarDropdownLink = document.querySelectorAll(
   ".sidebar-dropdown-header-expand",
 );
 let scrollToTop = document.getElementById("ScrollToTop");
+const pageContent = document.querySelector(".page-content");
 
+// ============================================================================
+// ANIMATION UTILITY FUNCTIONS
+// ============================================================================
 let slideUp = (target, duration = 500) => {
   // Check if already hidden or animating
   if (!target || window.getComputedStyle(target).display === "none") return;
@@ -73,7 +80,10 @@ let slideDown = (target, duration = 500) => {
   }, duration);
 };
 
-// ADD THE DROPDOWN TOGGLE CODE HERE
+// ============================================================================
+// SIDEBAR FUNCTIONALITY
+// ============================================================================
+// Sidebar dropdown toggle
 sidebarDropdownLink.forEach((dropdownItem) => {
   const toggleDropdown = (event) => {
     event.preventDefault();
@@ -124,8 +134,9 @@ sidebarDropdownLink.forEach((dropdownItem) => {
   });
 });
 
+// Sidebar accessibility
 function menuA11Y() {
-  //insert menu hidding behavior
+  //insert menu hiding behavior
   if (sidebar.offsetLeft == 0) {
     sidebar.setAttribute("aria-hidden", "false");
     sidebar.removeAttribute("inert");
@@ -138,52 +149,74 @@ function menuA11Y() {
     sidebar.setAttribute("aria-expanded", "false");
   }
 }
+
 if (sidebar) {
   sidebar.ontransitionend = menuA11Y;
   menuA11Y();
 }
 
+// Sidebar button toggle
 if (sidebarButton) {
   sidebarButton.onclick = () => {
     pageWrapper.classList.toggle("toggled");
   };
 }
 
-window.onscroll = () => {
-  scrollFunction();
-};
-
-if (scrollToTop) {
-  scrollToTop.onclick = (event) => {
-    event.preventDefault();
-    topFunction();
-  };
-}
-
+// ============================================================================
+// SCROLL TO TOP FUNCTIONALITY
+// ============================================================================
+// Function to show/hide scroll to top button based on scroll position
 function scrollFunction() {
-  if (scrollToTop) {
-    if (
-      document.body.scrollTop > 100 ||
-      document.documentElement.scrollTop > 100
-    ) {
-      scrollToTop.style.display = "block";
-    } else {
-      scrollToTop.style.display = "none";
-    }
+  if (!scrollToTop) return;
+
+  let scrollTop;
+  if (pageContent) {
+    scrollTop = pageContent.scrollTop;
+  } else {
+    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+  }
+
+  // Show button after scrolling down 100px, hide when at top
+  if (scrollTop > 100) {
+    scrollToTop.style.display = "block";
+  } else {
+    scrollToTop.style.display = "none";
   }
 }
 
-// When the user clicks on the button, scroll to the top of the document
+// Function to scroll the page or .page-content to the top
 function topFunction() {
-  let pageContent = document.getElementsByClassName("page-content");
-  if (pageContent && pageContent.length > 0) {
-    pageContent[0].scrollTop = 0;
+  if (pageContent) {
+    pageContent.scrollTop = 0; 
   } else {
-    document.body.scrollTop = 0;
+    document.body.scrollTop = 0; 
     document.documentElement.scrollTop = 0;
   }
 }
 
+// Attach scroll listener to .page-content or window
+if (pageContent) {
+  pageContent.addEventListener("scroll", scrollFunction);
+} else {
+  window.addEventListener("scroll", scrollFunction);
+}
+
+// Scroll to top button click handler
+if (scrollToTop) {
+  scrollToTop.onclick = (event) => {
+    event.preventDefault();
+    topFunction();
+  };
+}
+
+// Call scrollFunction on page load to ensure the button is hidden if already at the top
+window.addEventListener("load", () => {
+  scrollFunction(); 
+});
+
+// ============================================================================
+// BOOTSTRAP COMPONENTS INITIALIZATION
+// ============================================================================
 var popoverTriggerList = [].slice.call(
   document.querySelectorAll('[data-bs-toggle="popover"]'),
 );
@@ -196,4 +229,4 @@ var tooltipTriggerList = [].slice.call(
 );
 tooltipTriggerList.map(function (tooltipTriggerEl) {
   return new bootstrap.Tooltip(tooltipTriggerEl);
-});
+});

docs/whats-new/index.md

@@ -16,6 +16,11 @@ You can help improve Pelican. Visit the [Feedback Page](/feedback) to learn how
 
 We’re continually improving Pelican. The following changes are listed by the date we completed each change.
 
+## 2.3.6: January 22, 2026
+
+- Fixed a JS bug for back-to-top button
+- Fixed a JS bug for sidebar navigation
+
 ## 2.3.5: December 5, 2025
 
 - Improves documentation for the [Pagination](/components/pagination/) component