A Scroll Anchor for Expanding Long Product Details

A shopper taps "Materials and care" on a long product page. The panel opens, the content below shifts, and the heading is now above the top edge of the screen. The shopper is looking at the middle of a paragraph and has to scroll back to learn what they opened. This article proposes a small rule to prevent that. It is a design proposal to test, not a description of any existing feature.

The rule in one sentence

When a section expands, the section heading should end up fully visible, and the viewport should move only if the heading would otherwise be hidden.

That last clause matters. Scrolling on every open feels restless. Scrolling only when needed keeps the page calm when the heading is already in view.

Decide which case you are in

Before writing any code, classify each expandable section by where its heading sits when the user taps it.

Case A: the heading is comfortably in view and the content opens below it. Do nothing. The page should not move.

Case B: the heading is near the bottom edge. The content opens below the fold, so the user sees nothing new. Consider scrolling just enough to bring the heading and the first lines of content into view.

Case C: another section above was open and collapses as this one opens. The layout shrinks above the tapped heading, which can pull the heading upward or off screen. Consider measuring the heading position before and after the change, then compensating by the difference.

Case D: a sticky header covers the top of the page. A heading scrolled to exactly the top edge sits underneath it. Reserve space equal to the sticky header height plus a small margin.

A measurement approach to try

Record the heading's distance from the top of the viewport just before the change. After the layout settles, record it again. If the heading is above the visible area, or is covered by a sticky header, scroll by the difference so it lands just below that header. Otherwise leave the scroll position alone. Wait for the layout to settle before measuring, since images or animation inside the panel can change heights after the first frame. Respect the user's reduced motion preference by moving instantly instead of animating.

Expansion-position acceptance card

Copy this card and run it for each expandable section. Mark pass or fail.

1. Heading near the top, tap to open: the page does not move.
2. Heading mid-screen, tap to open: the heading stays at the same screen position or remains visible.
3. Heading near the bottom, tap to open: the heading and at least the first line of content are visible afterwards.
4. Another section open above, tap a lower section: the tapped heading is still visible after the other one closes.
5. Sticky header present: the heading is not hidden beneath it.
6. Panel contains a late-loading image: the heading is still visible after the image loads.
7. Opening a section by keyboard: focus remains on the heading control and it is visible.
8. Reduced motion enabled: no animated scrolling occurs.
9. Collapse the section: the user is not thrown to an unrelated part of the page.
10. Small and large viewports, plus a rotated device: items 1 to 5 still pass.

Hypothetical worked example

Imagine a page for a canvas tote with four sections: Description, Materials, Dimensions, Care. Materials is open. A user with the Care heading near the bottom of the screen taps it. Materials, which is tall, collapses, and Care jumps upward by roughly the height Materials occupied. Before the change, Care sat 600 pixels from the top. After the layout settles, it sits at 140 pixels, behind a 72 pixel sticky header? No, 140 is below it, so it is visible and no extra scroll is needed. Now suppose it had landed at 40 pixels. That is under the sticky header, so the rule scrolls by 72 minus 40 plus a margin of 12, which is 44 pixels, putting the heading at 84. The card items 4 and 5 both check exactly this.

Stop conditions

Stop and reconsider if the fix causes any of these. The page scrolls when the heading was already visible. The user scrolled manually during the opening and then gets pulled back. The adjustment fires repeatedly as content loads. If any occurs, narrow the rule to a single adjustment after the first settle, and skip it if the user has scrolled since the tap.

Acceptance

Consider the work acceptable when every card item passes on at least one real phone-sized viewport and one desktop viewport, and when a reviewer who did not build it can open each section without losing the heading. Record any failures as open items rather than adjusting the card to match.

Sources