This script automatically preserves scroll position when navigating between listing pages and product detail pages in your e-commerce template. Here's how it works:
🎯 Smart Detection
Automatically detects if you're on a listing page (category, collection, search) or product page
💾 Position Storage
Stores scroll position before navigating to a product page
🔄 Position Restoration
Restores scroll position when returning via browser back button
📱 Mobile Friendly
Works on all devices and handles mobile app navigation
How to Use
The script is automatically included in your template and works out of the box. However, you can also use the provided API functions:
// Check if scroll position is stored
if (window.zpScrollPreservation.hasStoredPosition()) {
console.log('Scroll position available');
}
// Manually store current scroll position
window.zpScrollPreservation.storePosition();
// Manually restore scroll position
window.zpScrollPreservation.restorePosition();
// Get current scroll position
const currentPos = window.zpScrollPreservation.getCurrentPosition();
// Enhanced back navigation
window.zpGoBack();
Demo Controls
Test the scroll preservation functionality:
Scrollable Content (Demo)
Scroll down to simulate being on a listing page, then use the controls above:
📜 Listing Page Content
This represents a product listing page
Scroll down to see more content...
Your scroll position will be preserved!
Implementation Details
The script is integrated into your existing custom.js file and provides:
Automatic Detection: Identifies page types using window.zs_view and URL patterns
Performance Optimized: Throttled scroll events and efficient storage
Cross-Browser Compatible: Works on all modern browsers
SPA Ready: Handles dynamic page changes and history manipulation
Mobile Optimized: Works with mobile apps and visibility changes
Browser Support
This script works on all modern browsers that support: