Add threshold and scrollto props to back-to-top

nasa-jpl · Jul 28, 2023 · 7746586 · 7746586
1 parent a783a74
commit 7746586
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/dist/js/explorer-1.min.js b/dist/js/explorer-1.min.js
diff --git a/src/index.html b/src/index.html
@@ -806,7 +806,7 @@ <h2 class="text-h3">Heading</h2>
         Maintained by DesignLab
       </p>
     </div>
-    <div id="BackToTop" class="BlockBackToTop">
+    <div id="BackToTop" class="BlockBackToTop" data-threshold="600">
       <button
         class="BaseButton text-contrast-none inline-block -primary -compact fixed bottom-10 right-10 z-60"
       >

diff --git a/src/js/components/_BlockBackToTop.js b/src/js/components/_BlockBackToTop.js
@@ -5,23 +5,23 @@
  */
 
 document.addEventListener('DOMContentLoaded', () => {
-  const backToTopBtn = document
-    .getElementById('BackToTop')
-    .querySelector('button')
+  const backToTop = document.getElementById('BackToTop')
+  const backToTopBtn = backToTop.querySelector('button')
+  const threshold = parseInt(backToTop.dataset.threshold) || 300
+  const scrollTo = parseInt(backToTop.dataset.scrollto) || 0
   const alwaysVisible = backToTopBtn.classList.contains('always-visible')
-  const threshold = 300
 
   const onScroll = () => {
     if (!alwaysVisible) {
-      showBackToTop = window.scrollY > threshold
+      let showBackToTop = window.scrollY > threshold
       showBackToTop
         ? (backToTopBtn.style.display = 'block')
         : (backToTopBtn.style.display = 'none')
     }
   }
 
   const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    window.scrollTo({ top: scrollTo, behavior: 'smooth' })
   }
 
   window.addEventListener('scroll', onScroll)

diff --git a/storybook/stories/components/BlockBackToTop/BlockBackToTop.js b/storybook/stories/components/BlockBackToTop/BlockBackToTop.js
@@ -1,7 +1,14 @@
 import { BaseButtonTemplate } from '../BaseButton/BaseButton'
 
-export const BlockBackToTopTemplate = ({ alwaysVisible }) => {
-  return `<div id="BackToTop" class="BlockBackToTop">
+export const BlockBackToTopTemplate = ({
+  alwaysVisible,
+  threshold,
+  scrollTo,
+}) => {
+  if (!threshold) threshold = ''
+  if (!scrollTo) scrollTo = ''
+
+  return `<div id="BackToTop" class="BlockBackToTop" data-threshold="${threshold}" data-scrollto="${scrollTo}">
   ${BaseButtonTemplate({
     variant: 'primary',
     cssClass: `z-60 ${alwaysVisible ? 'always-visible' : ''}`,