In archive grids (posts/products/media) based on Query Loops with ajax pagination or ajax filters/sorting options, users often experience confusing non-automated scroll behavior to the top of the grid after an AJAX reload due to sorting/filtering/pagination. The new results often appear mid page, forcing visitors to manually scroll up to locate where the refreshed grid actually starts, breaking the natural reading flow — users intuitively expect to begin reading from the top of the newly sorted grid, not halfway through the layout.
This script will scroll to top of the grid container after AJAX reloading.
<script>
/**
* Smooth scroll fix for Bricks AJAX sorting/filtering.
*
* Hooks into Bricks custom event: 'bricks/ajax/query_result/displayed'.
* Scrolls smoothly back to the top of the grid after an AJAX reload.
* Skips tall sections above the grid and compensates for offset spacing.
* Clean and minimal - perfect for long archives, product loops, or listings.
*/
document.addEventListener('DOMContentLoaded', () => {
// Set the ID of the element to scroll to (typically the main grid wrapper).
// You can replace this with any element — e.g., a header, section, or anchor —
// depending on where you want the viewport to scroll after the AJAX reload.
const grid = document.getElementById('brxe-2abfa6');
// Exit early if the grid is not found on this page.
if (!grid) return;
// Listen for the Bricks AJAX completion event.
document.addEventListener('bricks/ajax/query_result/displayed', () => {
// Only scroll if the viewport is not already near the top.
if (window.scrollY > 100) {
// Delay to ensure the grid has fully rendered.
const renderDelay = 300; // milliseconds (adjust if needed)
// Optional offset to scroll slightly above the grid.
const extraOffset = 50; // pixels (increase to move higher)
// Perform the scroll after the render delay.
setTimeout(() => {
// Calculate the target scroll position relative to the viewport.
const targetY = grid.getBoundingClientRect().top + window.scrollY - extraOffset;
// Smoothly scroll to the target position.
window.scrollTo({ top: targetY, behavior: 'smooth' });
}, renderDelay);
}
});
});
</script>
-
Remember to replace ‘brxe-2abfa6’ with the ID of your wrapper element that contains the query loop cards.
-
This listens to Bricks’ official bricks/ajax/query_result/displayed event, so it runs every time the results update (sorting, filtering, etc.).