Configure Pagination Link to Scroll to Section Anchor

When using pagination on a CMS collection there seems to be no way to configure the previous and next buttons to scroll back to the top of the section? Or is there?
Thanks


1 Like

Do you mean this?

Hey thanks but nope, that sounds pretty wild, normally there is a simple option to configure the link right?, set it to scroll to a page section and done, when using pagination there is no options to configure the link, is it possible to add a custom attribute to say on click, yeah show the next collection item but scroll to the top of the section?

There is a scrollto option but I’m not sure how it’s supposed to be used.

Edit:
This is the answer forrest gives to the same question you have:

Don’t think this will be an easy fix unfortunately.

A pixel number value would change across different viewports so that would not work. Webflow is bit weird hey, not sure what I’ve got myself into here…Surely I’m just ignorant and there is a simple way to do it, I just hope someone can enlighten me…:crossed_fingers:t3:

Can I bump this :point_up_2:

And ask if anyone got a solution? I don’t know how to write the code but I would of though its like; listen for a click on the pagination button and if clicked scroll to the top of the section…?

https://preview.webflow.com/preview/barber-industries?utm_source=barber-industries&preview=30604cd8b2bc5018dd6a9605bcaff0dc

@forresto would you happen to have any input on this?
Kind Regards
jr

:cricket::cricket::cricket::cricket::cricket::cricket::cricket:

After much research, trial and error I have managed a solution for this, so sharing here in case others come across the same problem. I have added an on success function to the seamless pagination script.

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>

var containerSelector = '#seamless-replace';
$(document).pjax(
'.w-pagination-wrapper a',
containerSelector,
{
  container: containerSelector, 
  fragment: containerSelector,
  scrollTo: false,
  timeout: 2500,
}
);

<!-- on pjax success animate to section anchor -->
$(document).on('pjax:success', function() {
$('html, body').animate({
scrollTop: $('#your-section-id-here').offset().top}, 1000);
})
 
$(document).on('pjax:end', function() {
Webflow.require('ix2').init();
});
</script>
<!-- End seamless-pagination custom code -->
9 Likes

wow

@STFS thank you!

1 Like

This is still working perfectly - thanks @STFS

Thanks for sharing.
Seems like some of you had success with this method?
I’ve seen this in another forum post here. It didn’t work for me then, and it doesn’t now. Not sure why.

Can anyone spot what I’m doing wrong?

https://preview.webflow.com/preview/ornament-is-crime?utm_medium=preview_link&utm_source=designer&utm_content=ornament-is-crime&preview=67d6cc255726c5fa9db030eebf3f2545&workflow=preview

Thanks!