Scroll Back to Top for applied filters & Advanced Pagination

Depending on certain layouts or if you are using the Advanced Pagination booster, you may need need to scroll the users view back to the top of the collection list once filters are applied or the user clicks/taps on the “Next page” pagination button, so they can properly browse the updated list. This helps provide a much nicer user experience rather than leaving them lost in middle or at the bottom of the page. To help with this, we've provided a simple code snippet for you to use.

Copy code below:

<!-- JETBOOST PAGINATION SCROLL TO TOP -->
<script>
const paginationButtonsWrapper = document.querySelector('.CLASS-OR-ID')
const paginationButtonClassName = 'pagination-button'

const scrollTarget = document.querySelector('.CLASS-OR-ID')
const scrollOffset = 80 // number in pixels for distance to stop from the top
const scrollDelay = 500 // in milliseconds before starting scroll action

paginationButtonsWrapper.addEventListener('click', function (e) {
  const buttonTypes = ['A', 'BUTTON']

  setTimeout(function () {
    const buttonElement = e.target.closest('.' + paginationButtonClassName)
    if (
      buttonElement &&
      buttonTypes.includes(buttonElement.tagName)
    ) {
      const y = scrollTarget.getBoundingClientRect().top + window.scrollY
      window.scroll({
        top: y - scrollOffset,
        behavior: 'smooth',
      })
    }
  }, scrollDelay) // The delay in milliseconds (half a second)
})
</script>

How to use the code:

1. Copy the entire code and paste it in the page's settings within the </body> custom code section.

   

2. We want to replace the placeholder values for the paginationButtonsWrapper and the paginationButtonClassName variables. Replace the .CLASS-OR-ID with the class or id for your navigation buttons wrapper element. You'll notice a "." in front of the name. This denotes that the following name is a class name. You would use a "#" if you're targeting the element with an ID. Don't delete the ' ' around the values, as they are suppose to be string values (text).
3. Next we want to update the scrollTarget variable with our own value, which is going to be a class or ID again. The scrollTarget is an element that we can use to know where we want our page to scroll to. This can be your container or section element for the collection list wrapper. You can target any top level element (parent) of your collection list and/or filters or the collection list wrapper itself. Again, this is just to reference where we want our scroll-to point to be.

4. Lastly, we have two more options we can change to better suit our project. The scrollOffset and scrollDelay values.

   In the previous step, we targeted the element we want to use as our scroll target, and what you'll notice if you set the scrollOffset to "0" is the page will scroll till the target is touching the very top of the page. The might not work if you have a sticky navbar, as we don't want our collection list to be hidden underneath it. The scrollOffset value is the distance from the top in pixels. So, the "80" default value is 80 pixels from the top.

   The delayOffset is set in milliseconds and delays the start of the scroll action. This is great to account for different load times depending on the content density of what's being rendered on the page inside each collection item. Great to also offset any load in animations or things like that. It just helps you dial in a nicer feel. I would not suggest setting the duration too high so you can keep a nice seamless feel.

From there you should have a nice scroll action that leads users back to the top of the list so they can continue browsing.