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 Scroll Back to Top -->
<script>
$('.back-to-top').click(function(e) {
  setTimeout(function() {
    $('html, body').animate({
      scrollTop : $('.top-target').offset().top - 60 // The scroll offset in pixels
    },'slow');
  }, 1000); // The delay in milliseconds (1 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. Copy this class back-to-top, and add it to any filter button or each of the “Previous” and “Next” pagination buttons.
  3. Copy this class top-target, and add it to the section you want to scroll back to the top of.

From there, you'll see the number "60," which is for the distance from the top of the viewport. This is in case you have a sticky navbar and you want to scroll to the bottom of the navbar so any content in that section that you’re scrolling to is not hidden behind the nav. The number "1000" is the delay before the code executes the scroll to give Jetboost enough time to load the next page. Overall, this just provides a bit of a nicer experience.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us