Change URL (with pushState) using Infinite Scroll in WordPress

Question

I've set up the infinite scroll from here and it works: https://github.com/pklauzinski/jscroll. Additionally I would like to change the URL in the browser address bar but I can't get it working. There is a similar solution on https://github.com/wataruoguchi/clever-infinite-scroll but I would like to load only the next post always and not all the posts called by the selector.

How could I use pushState with jScroll? The goal is to use jScroll and the URL needs to be changed when scrolling to previous or next posts.

vard · Accepted Answer · 2015-09-09 09:21:30Z

0

You can use the callback parameter of jscroll in order to fire a function after it finished to load the content.

var currentPage = 1;
$('.jscroll').jscroll({
    // your current jsscroll options
    callback: function() {
        currentPage++;
        History.pushState(null, $('head > title').html(), 'http://yourpageurl.com/page/' + currentPage);
    }
});

In that callback you can use pushState to manipulate the browser history. Replace the url with the correct one, and update currentPage if your infinitescroll is supposed to be going backward too.

You'll need to scroll to the specific position on load too, from the page parameter.

answered Sep 9, 2015 at 9:21

vard

4,1662 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

drH Over a year ago

Thank you! I've found github.com/wataruoguchi/clever-infinite-scroll but it's not perfect. I will have to change the URL when scrolling up or down to previous or next post.

vard Over a year ago

Do you have some id that you can use to identify the "pages"? One solution could be to use jQuery.isOnScreen in order to identify which section is displayed.

drH Over a year ago

"Waypoints" is good. A DIV class identifies the URL data-url= then it can be changed with pushState. I will come back later with my findings.

Collectives™ on Stack Overflow

Change URL (with pushState) using Infinite Scroll in WordPress

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related