How to change page number in browser with infinite scroll?

Hey community,

I’m having issues with this feature I’m making for a client. Their website is built on Wordpress. They want infinite scroll on certain pages. I already got that build and working. They decided they want to add the function to update the url (with the page number) as the posts are loaded in. So for example, the url starts with www.domain.com/somewhere/ and as you scroll and pages are loaded in, the url changes to www.domain.com/somewhere/page/2, www.domain.com/somewhere/page/3, www.domain.com/somewhere/page/4 and so forth. Using history.pushState I have that part working. However, I have come across an issue when you load up one of those pages and then try to scroll to more posts. When doing so, the url loads in as www.domain.com/somewhere/page/4/page/5, www.domain.com/somewhere/page/4/page/6, www.domain.com/somewhere/page/4/page/7 and so forth.

With that knowledge (and the below snippet of my code that modifies the url), could someone direct me on how to get the url rewritten properly in the event the user loads into a page above (such as through refreshing their browser) and continues to scroll through posts? if they reload into …/somewhere/page/4 then when they continue to scroll it should continue on as …/somewhere/page/5 etc.

My JavaScript knowledge is still… a work in progress. :stuck_out_tongue:

success:function(data){
    $(loadingDiv).detach();
    if(data){
        infiniteScrollClass.find('.post:last-of-type').after(data);
        canBeLoaded = true;
        infinite_scroll_params.current_page++;
        pageNumber = infinite_scroll_params.current_page;
        history.pushState(null, null, domainUrl+'page/'+pageNumber);
    }
}

The problem is here: domainUrl+'page/'+pageNumber, if the user opens at a specific page, then the domainUrl will already contains page/4 and you’re adding page/+pageNumber again.

You can check if domainUrl contains the page and if so change just the page number instead of adding page/+pageNumber again.

Thank you ghukahr for the tip!

The domainUrl variable is assigned to location.href. I am adding the page + page number because it doesn’t exist in the url. Being that I’m using Wordpress, is there a more efficient way I should be pulling the URL as the page is scrolled and pushing it to the address bar? One of the things I did try to do was just add ‘page’ directly to the domainUrl variable when I declare it and then only add the page number through the pushState, but page/page-number was still getting appended to the url.

My knowledge of wordpress is pretty limited, so I can’t help you with that exactly.

If you open the page directly in a specific page, for example, site.com/pages/4, what is the value of domainUrl?

So if the user goes directly to a paged page, the domainUrl will be set to domain.com/somewhere/page/pageNumber because the variable is initially being set to location.href. So with that it makes sense why, when the user scrolls and more posts are loaded, that the address bar gets appended with another /page/pageNumber. But that’s what I need to prevent from happening. I need just the number at the end of the domainUrl string to get updated.

Exactly. Should be easy now, you check if there’s already a page/something in the url, if not you keep doing what you’re doing, but if there is you remove that part of domainUrl and add the correct page.

Sorry for sounding so elementary. This whole task has been a challenge, I’m amazed I got as far as I have with my knowledge lol

Where would that check be done? I did that before, and it would remove ‘page’ from the url as posts are loaded since it’s currently inside an AJAX call and would have ‘page’ in the url next time posts are loaded. So essentially, once the page is scrolled and posts gets loaded, ‘page’ will always be in the url. And ‘page’ would already be in the url if the user loaded up one of the paged pages (ie, domain.com/somewhere/page/3).

Why don’t you use location.href inside the success function instead of domainUrl, that way you’ll have the updated url string.

Thanks for your tips, I’ll tinker more with that and see what my results are. Much appreciated. :slight_smile:

Using the following code, I am getting the url desired on the first scroll (domain.com/somewhere/page/2) but any load after that the url remains unchanged. The current_url in history.pushState uses the wordpress codex (in a php file) to get the url of the next page. Unfortunately, when I wrapped history.pushState(null, null, infinite_scroll_params.current_url) it alerts as undefined every time more posts are loaded. Is there a step I’m missing to get the history.pushState to freshly trigger with each loading of posts?

success:function(data){
    $(loadingDiv).detach();
    if(data){
        infiniteScrollClass.find('.post:last-of-type').after(data);
        canBeLoaded = true;
        alert(history.pushState(null, null, infinite_scroll_params.current_url));
    }
}

I think since you’re getting the current_url from php you’re using the url you got when you loaded the page and not the url that is in the address bar at that particular moment. But I’m not sure, because I’m not too familiar with wordpress.

It looks like pushState doesn’t require the domain url, just what you want to insert, so you don’t need to use the current_url unless you also want to preserve what was in the url.

pushState doesn’t return anything, there’s no point in alerting it, it will always be undefined.

I think you can try to do this:

history.pushState(null, null, `/page/${pageNumber}`)

Please note the / before the page, this will make sure the browser replaces everything after the domain url with your string. If you remove it, then the browser will append that string into the current url.

Thank you so much for your help, ghukahr. It appears the issue has been resolved. I took what you suggested and modified it a bit. Turns out I also needed to essentially do a string replace on the url to get it to act as needed. Working great now. :slight_smile:

Great! Nice to know it’s working now.