Load more posts button for query loop

How To
1

Hi friends! I set it up Load More Posts button for query loop with interactions and it works great, but with one problem. When, for example, I click several times on Load More Posts button to load more posts and open one of them… then, when i want to go back, the browser takes me to the bottom of the page. It simply does not load previously opened posts . It loads the first six as set in query loop. Is there any solution for this? Thanks!

2

yes
that is how the ajax loading works

use pagination instead of ajax but that ofcourse will refresh the page every time.

in every method you win some you lose some :slight_smile:

3

Thanks for replay @sinanisler

Is there even a possibility to return to the top of the page? But in that case, it really doesn’t make any sense from a user experience point of view. What if someone loads on 40 posts from query loop, open the last one, read it and go back to open the next one in order? Then… will have to click five times on Load More Posts to get to the last one that is previously opened.

Pagination is not an option because the client does not want to change the link structure on the main blog page.

4

here give id to that section #blog-posts and add this .js on that page lets see if it will work :slight_smile:

I didn’t test it but should work.

window.addEventListener('popstate', function(event) {
    // Check if the current URL contains the hash you are interested in
    if(document.location.hash === '#blog-posts') {
        // Scroll to the DOM element with the ID 'blog-posts'
        const element = document.getElementById('blog-posts');
        if(element) {
            element.scrollIntoView();
        }
    }
});
5

Hi @sinanisler, sorry for late replay. The Load More Posts button actually works, but only for logged out users.

6

Hi there, not sure if you found solution. But it works for me on safari. Even when i load more posts, open one, then I can get back to previously loaded posts without any issue…