Update scroll bar when jumping to section

Design help General
1

Hello,

I’m new to Webflow and currently building my first site, which is a one-pager. In the navigation header, I’d like to have some links guiding the visitor to specific sections of my page. I’m having the issue that jumping works fine, but the scroll bar seems to be frozen. It means that when you jump to a section that way and try to scroll from there, you’re back at the page position where you initially clicked the jump link. I tried both the built-in jump fuctionality as well as custom code, ending up with the exact same result. Here’s one of the numerous versions of code I’ve tried:

<script>
  window.addEventListener("load", function () {
    const scrollBtn = document.querySelector('.btn-upwards');

    if (!scrollBtn) {
      console.warn("Button .btn-upwards nicht gefunden");
      return;
    }

    scrollBtn.addEventListener('click', function (e) {
      e.preventDefault();

      if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
      }

      // Alle scrollTop-Werte zurücksetzen
      document.querySelectorAll('*').forEach(el => {
        el.scrollTop = 0;
      });

      // Und für window zur Sicherheit
      window.scrollTo({ top: 0, behavior: 'smooth' });

      // Nach kurzer Zeit nochmal hard reset
      setTimeout(() => {
        document.querySelectorAll('*').forEach(el => {
          el.scrollTop = 0;
        });
        window.scrollTo(0, 0);
      }, 500);
    });
  });
</script>

Can somebody pls explain to me why this is happening and how to fix it?

2

Hey @tomtothet,

By default in-page section linking also updates the scroll’s position in a site. So it might be likely that something else on the page is preventing this default behavior, can you share the site’s read-only link to troubleshoot this in a better way?

3

Hi @AJ_Dev ,

thanks for your help! That seems to make sense. Here’s my read-only link:

4

It seems that the link does not work. I created it under “share”. is it mandatory to invite a reviewer with his/her email address to create the read-only link for anyone to see? Here’s another try:

5

@tomtothet , this read-only links works but when I view the site in preview mode, I am not able to see the scroll stuck in its position and it works exactly is it should, when I navigate to the ‘Features’ section.

Are you facing this issue on the published site? The site does not seem to be published so I am not able to test it there.

6

@AJ_Dev , this is really weird. I opened the link in a private tab in Chrome and it worked there. After that, I updated the browser, deleted the cache and logged out and in again on Webflow. Now it works. I have no idea what caused the issue. Thanks a lot for your help!

1 Like