Scroll to certain Section after Page change in Dawn

[gork]

Hi all, my wife and I are preparing our new Shopify based shop at the moment. I’ve already cleared lots of questions with old community posts. Thanks to all of you out there! Now I’ve encountered an issue I can’t find:

We’ll have a special Collection page for each brand that we sell with

• a collection banner

• their collections

• a collection with the in-stock items

• a product grid with all of their items

If we change pages in the product grid it loads the 2nd page and scrolls to the top.

Can I change the behaviour of the pages that the 1st page is loaded at the top but the 2nd and following pages will be loaded at the position of the product grid.

see here a maximum zoomed out view to explain:

I hope that’s understandable and I expect it’s a very easy solution if you just know what search terms to use

Thanks a lot in advance and have a nice weekend!

[TheUntechnickle]

Hi @gork !

Super to know you’ve starting your Shopify store, I’ll try my best to resolve the issue you’ve been facing. Looking at your detailed explanation of the pagination issue, I understand you want to maintain the scroll position for pages 2+ while keeping the default top-scroll behavior for page 1 of your collection pages.

To achieve this, you’ll need to modify your theme’s JavaScript. Look for the pagination handler in your theme files (often in pagination.js or collection.js) and add a condition to check the page number. Here’s how you can approach it:

1. Find your theme’s pagination event handler
2. Add a check for the page number
3. Only allow scroll-to-top for page 1

Something like this should work:

// In your pagination handler:
if (currentPage > 1) {
    // Store current scroll position
    const scrollPosition = window.scrollY;
    
    // After content loads, restore scroll position
    window.scrollTo({
        top: scrollPosition,
        behavior: 'instant'
    });
}

This will maintain the scroll position for any page after the first one, while keeping the default scroll-to-top behavior for page 1.

Hope this helps with your collection pages! Let me know if you need any clarification. In case you want us to do it for you, feel free to DM or email your collaborator code.

Cheers!
Shubham | Untechnickle

[devcoders]

Hello @gork
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[gork]

The collection is question can be found here:

http://qrws9g-k8.myshopify.com/collections/aurora

Shop PW: tabnew

I want to “aim” for the rich text section “All Aurora Products” and prefer not to have a fixed value of scroll behaviour as the collections, texts and products before hat may vary. I would adapt this solution to the other brand pages that we’re putting together right now - I expect to have the same issue there as well as they would be made pretty similar.

[gork]

Thanks for the prompt feedback.

However I understand this will affect all pages not just the one and there will be different variants for different brands.

Also if possible I would prefer to link the y-value to a certain section in the page as the collections and products above will vary and today’s y-value can change by tomorrow.

[gork]

I now added an empty div id “all-products” and i can scroll there with a link.

How do i tell the system to add #all-products to the page changer?

[TheUntechnickle]

Hi! Thanks for the update. Since you’ve added the all-products div, here’s a more targeted solution that will work across your brand collection pages:

// Add this to your theme's JavaScript files
document.addEventListener('DOMContentLoaded', function() {
  // Only run on collection pages with the all-products div
  const allProductsSection = document.getElementById('all-products');
  if (!allProductsSection || !window.location.pathname.includes('/collections/')) return;

  // Get all pagination links
  const paginationLinks = document.querySelectorAll('.pagination__item a, .pagination__link');
  
  paginationLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      const url = new URL(this.href);
      const targetPage = url.searchParams.get('page');
      
      // For page 1, remove any hash and scroll to top
      if (targetPage === '1' || !targetPage) {
        window.location.href = url.origin + url.pathname + url.search;
        return;
      }
      
      // For other pages, add the #all-products anchor
      window.location.href = `${url.origin}${url.pathname}${url.search}#all-products`;
    });
  });
});

This solution:

1. Only runs on collection pages where the all-products div exists
2. Page 1 behaves normally (scrolls to top)
3. Pages 2+ will scroll to your all-products div location
4. Works for each brand collection independently
5. Adapts automatically as content changes since it uses the div position rather than a fixed Y-value

To implement:

1. Make sure you have the all-products div placed just above your product grid in each brand collection template
2. Add this JavaScript to your theme files (in your theme.js or a separate JavaScript file)

You can test it by clicking through your pagination - page 1 should scroll to top, while other pages should scroll to your product grid section.

Let me know if you need any adjustments or clarification!

Shubham | Untechnickle