Is there a way to implement 'Blog Pagination Scroll to'?

Bootstrap Studio Help
1

Hi,

I’m using the pagination component on my main blog page to limit the number of viewable posts. However, because of design, the pagination buttons sit well below the start of the viewable items, and when a next or previous page button is clicked it switches between them, but requires the user to scroll back to the fist item in the list. Also, at times on mobile view, it jumps directly to the bottom of the list which removes the entire list of posts from view.

Is there a way to scroll back to the the top of the list when the user clicks a page number, or next and previous? Can this be achieved with an anchor and javascript, or possibly with a ‘bs-data=’ instruction?

I hope I’m making enough sense …

2

If you give the blogloop component an id=“blogtop” you can do something like this
add this to a javascript file

document.addEventListener('DOMContentLoaded', function () {
  const blogTop = document.getElementById('blogtop');
  if (!blogTop) return;

  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes' &&
          mutation.target.matches('[data-bss-type="blog-loop-item"]') &&
          mutation.attributeName === 'style') {

        const isVisible = getComputedStyle(mutation.target).display !== 'none';
        if (isVisible) {
          blogTop.scrollIntoView({ behavior: 'smooth' });
          break; 
        }
      }
    }
  });

  const loopContainers = document.querySelectorAll('[data-bss-type="blog-loop"]');

  loopContainers.forEach(container => {
    const items = container.querySelectorAll('[data-bss-type="blog-loop-item"]');
    items.forEach(item => {
      observer.observe(item, { attributes: true, attributeFilter: ['style'] });
    });
  });
});

The pagination in the blogloop component isn’t true pagination. Simply toggling the display from none to block when changing pages isn’t ideal. If your blog has many pages, all blog items are still loaded at once, which increases the page load time. There are better ways to implement pagination and filter your blog data more efficiently.

3

Thank you for the JS suggestion. I will certainly give it a look.

I agree with you about the management aspect of numerous blog posts in this manner and need to investigate a more efficient approach.

4

Thank you for bringing this to our attention. We’ll add a scroll to top option in our upcoming release.