Scroll Anchor

The Scroll Anchor is an invisible marker element that controls where the page scrolls after filter changes or pagination events — giving you precise control over the scroll-to position.

What It Does

When a visitor changes a filter or clicks to the next page, Grid Panda updates results via AJAX. After the new results load, the page needs to scroll to a sensible position — typically the top of the grid. The Scroll Anchor element lets you define exactly where that scroll target is.

It renders as a zero-height, invisible <div> with aria-hidden="true" — visitors never see it, but the JavaScript uses it as the scroll-to target.

How to Use

Open the Grid Layout Builder
From the element palette, drag the Scroll Anchor element into your layout
Place it where you want the page to scroll after filter/pagination updates — typically above the grid content area, below any header or filter bar
Save the grid. No further configuration is needed.

Tip: Place the anchor just above your results grid but below your facet bar. This way, when visitors filter or paginate, they scroll to the top of the results without losing sight of the filter controls.

HTML Output

The Scroll Anchor renders the following markup on the frontend:

<div
  class="gridpanda-scroll-anchor"
  data-gridpanda-scroll-anchor="1"
  aria-hidden="true"
  style="height:0;overflow:hidden;"
></div>

The element is invisible and takes no space in the layout.

Scroll Behavior

Grid Panda JavaScript looks for the scroll anchor in a priority order:

Scroll Anchor element — the first visible .gridpanda-scroll-anchor in the grid layout tree
CSS selector fallback — a custom selector set via data-scroll-anchor on the grid wrapper
Grid wrapper — if no anchor is found, scrolls to the grid container itself

Pagination vs. Filter Changes

The scroll behavior differs slightly depending on the trigger:

Trigger	Scroll Behavior
Pagination click	Always scrolls to the anchor if one is found
Facet change	Scrolls only if `data-scroll-on-filter` is enabled on the grid or the individual facet

Scrolling uses window.scrollTo({ behavior: 'smooth' }) for a smooth animated scroll to the anchor position.

Responsive Visibility

Like any grid layout element, the Scroll Anchor supports Hide On breakpoint controls. If the anchor is hidden at the current breakpoint (via gridpanda-hide-desktop, gridpanda-hide-tablet, or gridpanda-hide-mobile classes), the JavaScript skips it and falls back to the next scroll target in the priority chain.

This lets you place different anchors for different breakpoints — for example, scrolling to a higher position on mobile where the filter bar is collapsed.

Best Practices

Place one Scroll Anchor per grid — the first visible anchor is used
Position it above the grid content but below any sticky filter bars
For layouts with a sticky header, account for the header height — the anchor position is automatically adjusted using getBoundingClientRect()
Use breakpoint-specific anchors if you need different scroll positions for desktop and mobile
If you don't add a Scroll Anchor, Grid Panda falls back to scrolling to the grid wrapper itself