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?

For setting a consistent scroll stop point 60px above each section's H2, follow these Webflow-specific steps:

​

1. Create a Sticky Element

• Add a New Element at the top of your page that will act as a scroll space.
• Set the Height of this element to 60px.
• Give it a Unique ID or class, like scroll-buffer.

​

2. Adjust the Section Wrapper

• Wrap each H2 Section within a new div or container.
• Ensure the H2 is positioned 60px below the top of its wrapping element.

​

3. Implement Custom Code for Offset Scrolling

• In the Project Settings, navigate to the Custom Code tab.
• Paste the following script in the "Before </body> tag" section:

​

const scrollBuffer = document.querySelector('.scroll-buffer');

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    const offset = scrollBuffer.offsetHeight; // 60px
    window.scrollTo({
      top: target.offsetTop - offset,
      behavior: 'smooth'
    });
  });
});

​

4. Test on "Services" and "Products We Love"

• Ensure each anchor link targets the correct section IDs.
• Observe the scrolling behavior when clicking on links and confirm stop point consistency.

​

5. Publish and Verify

• Publish your Webflow site.
• Review both pages to ensure the scroll stop is consistent 60px above the H2 sections.

​

Summary

To ensure a consistent scroll stop 60px above H2 sections, create a scroll buffer, wrap H2s correctly, and implement custom JavaScript for anchor link adjustment across both "Services" and "Products We Love" sections.