When users click on pagination options that aren't scrolled back to the top, they may feel lost or assume the page hasn't updated. This damages the shopping experience and creates frustration from having to manually scroll up.
Always scroll users to the top when they navigate to a new page, ensuring they start fresh with the next set of products. This keeps navigation intuitive and prevents frustration from having to manually scroll up.
This optimization is essential if your collection pages show clear signs of user disorientation after pagination clicks.
- Your collection pages have 10+ products per page with pagination links at the bottom
- Analytics show high bounce rates (40%+) on page 2+ of collections or users quickly returning to page 1
- Heatmap data reveals users scrolling up immediately after clicking pagination or confusion patterns around page navigation
- Your store has 1,000+ monthly visitors browsing product collections regularly
- You're on Shopify, WooCommerce, or custom platform with ability to add JavaScript to collection templates
Implementation requires adding auto-scroll JavaScript to your collection page pagination links.
- Shopify Implementation: Access your theme's
collection-template.liquidorcollection.liquidfile in the Online Store editor - Add JavaScript: Insert this code before the closing
</body>tag or in your theme's JS file:
document.addEventListener('DOMContentLoaded', function() {
const paginationLinks = document.querySelectorAll('.pagination a, [data-pagination] a');
paginationLinks.forEach(link => {
link.addEventListener('click', function() {
setTimeout(() => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 100);
});
});
});
- Mobile Optimization: The smooth scroll works across devices, but test on mobile to ensure scroll timing isn't too fast (users need to see the transition)
- Implementation Time: 15-30 minutes for basic setup, plus 1-2 hours for testing across different collection pages and devices
Track these metrics to validate the improvement in user experience and browsing behavior.
- Pages per session on collection pages: Expect 15-25% increase as users browse more confidently through paginated results
- Bounce rate on pages 2+ of collections: Should decrease by 10-20% within 2-3 weeks of implementation
- Time spent on collection pages: Monitor 20-30% increase in engagement time per collection page visit
- Product clicks from paginated pages: Track via Google Analytics Enhanced Ecommerce or your platform's built-in analytics for improved discovery
- AVOID: Making scroll animation too fast or jarring - users need visual confirmation the page changed. BEST PRACTICE: Use smooth scroll with 100-200ms delay
- AVOID: Only targeting specific pagination selectors that might change with theme updates. BEST PRACTICE: Use multiple selectors to catch all pagination elements
- AVOID: Implementing on AJAX-loaded pagination without updating the script. BEST PRACTICE: Re-bind events after AJAX loads or use event delegation
- AVOID: Forgetting to test with filters active - pagination + filtering can break the scroll behavior. BEST PRACTICE: Test all collection page states including filtered results
Get A Free Website Audit.
We’ll identify what’s leaking revenue on your site and show you how to fix it. The free audit includes: