how to implement "scroll-padding-top"

Design help Webflow integrations
1

how to implement “scroll-padding-top” like https://codepen.io/EinLinuus/pen/gOgjBpO

2

As far as i know Webflow uses its own scroll script that doesn’t respect scroll-padding or scroll-margin, which can be frustrating when trying to fine-tune scroll behavior—especially for anchor links.

In my experience, the only reliable solution is to completely disable Webflow’s built-in smooth scroll and handle it manually with CSS.

How to do it:

Add the following to your custom code section (not inline—doing so can cause issues in the Webflow Designer):

<style>
  html {
    scroll-behavior: smooth;
  }
</style>

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () {
    // Disable Webflow's default smooth scroll behavior
    $(document).off('click.wf-scroll');
  });
</script>

This disables Webflow’s scroll handling, allowing native CSS scroll-behavior to take over, so you can use properties like scroll-padding-top effectively.