Seamless pagination with "pjax"

Community resources Webflow Tips
73

Update:

I was able to make it work for all the other tabs as well, but I had to add separate ID’s for the buttons in the other tabs. Full code for future reference!:

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

<script>

$("#next-seamless").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#tabs").offset().top
    }, 2000);
});

$("#next-seamless2").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#tabs").offset().top
    }, 2000);
});

$("#next-seamless3").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#tabs").offset().top
    }, 2000);
});

$("#next-seamless4").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#tabs").offset().top
    }, 2000);
});

  var containerSelector1 = '#seamless-replace1';  
    $(document).pjax(
    '#w-pagination-wrapper1 a',
    containerSelector1,
    {
      container: containerSelector1, 
      fragment: containerSelector1,
      scrollTo: false,
      timeout: 2500,
    }
  );
  
    var containerSelector2 = '#seamless-replace2';  
    $(document).pjax(
    '#w-pagination-wrapper2 a',
    containerSelector2,
    {
      container: containerSelector2, 
      fragment: containerSelector2,
      scrollTo: false,
      timeout: 2500,
    }
  );
  
    var containerSelector3 = '#seamless-replace3';
  
  $(document).pjax(
    '#w-pagination-wrapper3 a',
    containerSelector3,
    {
      container: containerSelector3, 
      fragment: containerSelector3,
      scrollTo: false,
      timeout: 2500,
    }
  );

    var containerSelector4 = '#seamless-replace4';

$(document).pjax(
  '#w-pagination-wrapper4 a',
  containerSelector4,
  {
    container: containerSelector4, 
    fragment: containerSelector4,
    scrollTo: false,
    timeout: 2500,
  }
);

// These lines should reinitialize interactions
$(document).on('pjax:end', function() {
   Webflow.require('ix2').init();
   onPageChange();
});

// executed every time pjax makes a request
function onPageChange() {
   $('#next-seamless').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 

   $('#back-seamless').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
      $('#next-seamless2').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
      $('#back-seamless2').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
         $('#next-seamless3').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
         $('#back-seamless3').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
            $('#next-seamless4').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
         $('#back-seamless4').click(function() {
       $([document.documentElement, document.body]).animate({
           scrollTop: $("#tabs").offset().top
       }, 2000);
   }) 
   
};

</script>
1 Like