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 as80
or120
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.