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')

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 - 80,
        behavior: 'smooth',
      })
    }
  }, 500) // The delay in milliseconds (half a second)
})
</script>

How to use the code:

Copy the entire code and paste it in the page's settings within the </body> custom code section.
Replace the class pagination-button with your own pagination button class.
Replace the id #top-target with your own id or class name. We recommend that this should be an id of a section or unique element above your collection list.
If you look lower into the code you will notice the number 60. This is the offset in pixels from the top where the scroll will stop so the anchor is not pushed right up against the top of the page or sitting behind a navbar. Change that to any number you'd like such as 80 or 120 etc.
Now you can adjust the scroll delay 500 as you see towards the bottom of the code above to match the average load time of your collection list.

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