Auto-Scroll to top of query loop grids after AJAX reload (filter/pagination/sort)

How To
1

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.).

2

You can achieve this natively in Bricks without custom JavaScript by adding an interaction:

  1. Set the trigger to Query AJAX loader (End) and select the target query.
  2. Set the action to Scroll to.
  3. Target the grid wrapper using its CSS selector.
  4. Set the desired offset and delay.

Since Bricks 2.3.11, AJAX pagination also automatically moves focus to the first newly rendered result, which scrolls it into view. Filter and sorting updates retain focus on the active control, so the interaction remains useful when you want those updates to scroll back to the grid as well.

One difference with the posted script is that bricks/ajax/query_result/displayed does not cover standalone AJAX pagination; the native AJAX End interaction covers both pagination paths.