Frustrating issue NEED HELP: I can't link my button to a section, or maybe WEBFLOW HAS BUGS!

Design help General
1

I want to link my button to a section on the same page but when I choose my div tag name of that section and preview, it won’t jump to that section. It goes to somewhere else a little above of that section.

my button is contact button on the slider
my section is contact us section

Also, when I link my text on my menu to sections, I have the same problem and they won’t work properly.

:angry:

Here is my site Read-Only: https://preview.webflow.com/preview/udelop?utm_medium=preview_link&utm_source=designer&utm_content=udelop&preview=8bbbfe8e9756b08e3836700c60e1a79b&mode=preview
(how to share your site Read-Only link)

2

I have the same issue and can’t find a solution despite searching all over the web for an answer. Did you by any chance find the problem?

3

Hey T_V, share your site readonly link if you want someone to take a look.

Web browsers are pretty simple with #hash scrolling. They just find the element ID or A NAME, calculate the position, and scroll.

Nothing to do with Webflow at all.

The most common problems I see are;

  • You’re scrolling to an ID, and you have multiple elements with that ID
  • The element you’re scrolling to has padding / margins / positioning behavior that affect the scroll-to position.
  • Your page has large media, animations, or effects that are slow to load. The browser tries to scroll when the element is in a different position than it ends up in.
  • You have scripts and CSS doing things to scroll behavior.
4

Hi! I had the same issue but I didn’t find solution on this forum.

So I made a custom script, and it works for me.

  1. delete the link for the button;
  2. add .ai-button class to your button or change .ai-button in the code to your class of the button;
  3. change ‘‘ai-autopilot’’ to your ID section.
  4. paste my script before tag
<script src="https://unpkg.com/@studio-freight/lenis@1.0.38/bundled/lenis.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const lenis = new Lenis({
      duration: 0.6,
      easing: t => t,
      smooth: true,
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    const btn = document.querySelector('.ai-button');
    const target = document.getElementById('ai-autopilot');

    if (btn && target) {
      btn.addEventListener('click', (e) => {
        e.preventDefault();

        let attempts = 0;
        const maxAttempts = 10;

        function scrollUntilVisible() {
          const rect = target.getBoundingClientRect();

          // Check: is the top of the section visible on screen?
          if (rect.top < 10 && rect.top > -10) {
            // Done, section is in place
            return;
          }

          // Scroll to target
          lenis.scrollTo(target, { offset: 0 });

          // Retry later if needed
          if (attempts < maxAttempts) {
            attempts++;
            setTimeout(scrollUntilVisible, 300); // wait for Webflow to fully render
          }
        }

        scrollUntilVisible();
      });
    }
  });
</script>