fix for clicking UX for last few headings when they cannot be scrolled to

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tocbot",
-  "version": "4.32.2",
+  "version": "4.32.3-0",
   "description": "Generate a table of contents based on the heading structure of a html document.",
   "main": "./dist/tocbot.cjs",
   "module": "./index.js",

src/components/Template/Tocbot/index.js

@@ -10,8 +10,8 @@ const TOCBOT_OPTIONS = {
   includeTitleTags: false,
   hasInnerContainers: true,
   onClick: (e) => { console.log('you clicked a link', e) },
-  headingsOffset: 40,
-  scrollSmoothOffset: -40,
+  // headingsOffset: 40,
+  // scrollSmoothOffset: -40,
   enableUrlHashUpdateOnScroll: true,
   // skipRendering: true,
 }

src/js/build-html.js

@@ -167,23 +167,37 @@ export default function (options) {
   /**
    * Update TOC highlighting and collapsed groupings.
    */
-  function updateToc (headingsArray) {
+  function updateToc (headingsArray, event) {
     // Add fixed class at offset
     if (options.positionFixedSelector) {
       updateFixedSidebarClass()
     }
-
     // Get the top most heading currently visible on the page so we know what to highlight.
     const headings = headingsArray
-    // Using some instead of each so that we can escape early.
-    if (currentlyHighlighting &&
+
+    const clickedHref = event?.target?.getAttribute('href') || null
+    const isBottomMode = clickedHref && clickedHref.charAt(0) === '#' ? getIsHeaderBottomMode(clickedHref.replace('#', '')) : false
+    const shouldUpdate = currentlyHighlighting || isBottomMode
+
+    if (shouldUpdate &&
       !!tocElement &&
       headings.length > 0) {
       const topHeader = getTopHeader(headings)
 
       const oldActiveTocLink = tocElement.querySelector(`.${options.activeLinkClass}`)
+
+      const topHeaderId = topHeader.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g, '\\$1')
+      const hashId = window.location.hash.replace('#', '')
+      let activeId = topHeaderId
+
+      if (clickedHref && isBottomMode) {
+        activeId = clickedHref.replace('#', '')
+      } else if (hashId && hashId !== topHeaderId) {
+        activeId = hashId
+      }
+
       const activeTocLink = tocElement
-        .querySelector(`.${options.linkClass}.node-name--${topHeader.nodeName}[href="${options.basePath}#${topHeader.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g, '\\$1')}"]`)
+        .querySelector(`.${options.linkClass}[href="${options.basePath}#${activeId}"]`)
       // Performance improvement to only change the classes
       // for the toc if a new link should be highlighted.
       if (oldActiveTocLink === activeTocLink) {
@@ -270,17 +284,34 @@ export default function (options) {
     return currentlyHighlighting
   }
 
-  function getScrollTop () {
-    // If a fixed content container was set
-    let top
+  function getIsHeaderBottomMode (headerId) {
+    const scrollEl = getScrollEl()
+    const activeHeading = scrollEl?.querySelector(`#${headerId}`)
+    const isBottomMode = activeHeading.offsetTop > scrollEl.offsetHeight - (scrollEl.clientHeight * 1.4) - options.bottomModeThreshold
+    return isBottomMode
+  }
+
+  function getIsPageBottomMode () {
+    const scrollEl = getScrollEl()
+    const isBottomMode = getScrollTop() + scrollEl.clientHeight > scrollEl.offsetHeight - options.bottomModeThreshold
+    return isBottomMode
+  }
+
+  function getScrollEl () {
+    let el
     if (options.scrollContainer && document.querySelector(options.scrollContainer)) {
-      top = document.querySelector(options.scrollContainer).scrollTop
+      el = document.querySelector(options.scrollContainer)
     } else {
-      top = document.documentElement.scrollTop || body.scrollTop
+      el = document.documentElement || body
     }
-    return top
+    return el
   }
 
+  function getScrollTop () {
+    const el = getScrollEl()
+    return el?.scrollTop || 0
+  }
+
   function getTopHeader (headings, scrollTop = getScrollTop()) {
     let topHeader
     some.call(headings, (heading, i) => {
@@ -306,7 +337,7 @@ export default function (options) {
       if (!(window.location.hash === '#' || window.location.hash === '')) {
         window.history.pushState(null, null, '#')
       }
-    } else if (topHeader) {
+    } else if (topHeader && !getIsPageBottomMode()) {
       const newHash = `#${topHeader.id}`
       if (window.location.hash !== newHash) {
         window.history.pushState(null, null, newHash)

src/js/default-options.js

@@ -112,5 +112,8 @@ export default {
   tocScrollOffset: 30,
   // Enable the URL hash to update with the proper heading ID as
   // a user scrolls the page.
-  enableUrlHashUpdateOnScroll: false
+  enableUrlHashUpdateOnScroll: false,
+  // Threshold for when bottom mode should be enabled to handle
+  // highlighting links that cannot be scrolled to.
+  bottomModeThreshold: 30,
 }

src/js/index-esm.js

@@ -103,7 +103,14 @@ export function init (customOptions) {
       }
     }
   }, _options.throttleTimeout)
+  // Fire it initially to setup the page.
   _scrollListener()
+
+  // Fire scroll listener on hash change to trigger highlighting changes too.
+  window.onhashchange = window.onscrollend = (e) => {
+    _scrollListener()
+  }
+
   if (
     _options.scrollContainer &&
     document.querySelector(_options.scrollContainer)
@@ -126,7 +133,7 @@ export function init (customOptions) {
     if (_options.scrollSmooth) {
       _buildHtml.disableTocAnimation(event)
     }
-    _buildHtml.updateToc(_headingsArray)
+    _buildHtml.updateToc(_headingsArray, event)
     // Timeout to re-enable the animation.
     timeout && clearTimeout(timeout)
     timeout = setTimeout(() => {

src/scss/_page-styles.scss

@@ -28,7 +28,7 @@ body {
 }
 
 .content {
-  margin-bottom: 95vh;
+  // margin-bottom: 95vh;
 
   ul,
   ol {

src/scss/styles.scss

@@ -23,7 +23,7 @@ h3,
 h4,
 h5,
 h6 {
-  padding-top: 0.5em;
+  padding-top: 1.8em;
 }
 
 h1:focus,