How do I set the scroll stop point to be 60px above each section's H2 in Webflow for two pages with anchor links to sections "Services" and "Products We Love" where the scroll stop point is not consistent?

To create a consistent scroll stop point (offset) of 60px above each section's H2 for anchor links ("Services" and "Products We Love"), you'll need to adjust the positioning or spacing of each target element in Webflow.

1. Understand the Scroll Behavior

• Anchor links scroll the page to the top of the target element's bounding box.
• When you click a link to an element ID (e.g., #services), the browser scrolls the section's top to the top of the viewport.
• If you have a fixed nav or want to offset the target scroll position (e.g., by 60px), the anchor destination should account for that space.

2. Use Spacing Adjustment with a Spacer Div

One of the most common and stable ways is to create a scroll offset using padding or a spacer div.

• Inside the target section (e.g., Services or Products We Love), place a div block above the H2.
• Set its height to 60px and apply a margin-bottom: -60px to effectively "offset" the scroll position without changing the H2's visual location.
• Then set the ID for the anchor on this spacer div, not the actual H2 or section.

3. Steps in Webflow to Implement the Scroll Offset

• Select the section that scrolls incorrectly (e.g., Section containing your Services H2).
• Add a new Div Block just above your H2 inside the section.
• Style the Div Block:
• Set Height to 60px
• Set Margin-bottom to -60px
• Give the Div Block the desired anchor ID, such as services or products.

This creates an invisible offset target that positions the heading 60px below the top of the viewport after clicking the anchor link.

4. Apply to Both Pages

• Do this for the "Services" and "Products We Love" sections on both pages where the anchor is used.
• Make sure each target has its own spacer div with the correct ID and offset settings.

5. Avoid Using Negative Margin on the Section

• Don't apply negative margins or position adjustments directly to the H2 or sections — this can cause layout issues or overlap.
• Use a contained offset element as described to maintain design flexibility and consistency site-wide.

Summary

To set a scroll stop point 60px above your H2 headings for anchor links, insert a 60px-tall spacer div with a -60px bottom margin directly above the H2, and assign the anchor ID to that spacer. Apply this setup consistently across both pages to fix inconsistent scroll behavior.