Smooth scrolling not working anymore

Community resources
1

Hi
I made this Website with Webflow.
Clicking on a menue-item in the navbar it scrolls smooth to the section.
https://preview.webflow.com/preview/6374-website-mice-inventif?utm_medium=preview_link&utm_source=designer&utm_content=6374-website-mice-inventif&preview=b56bf21885cab3ef3fd0eb3fbe4d22c1&workflow=preview

But in this website (made with another account), it does not smooth scroll anymore, it just jumps.
Click on “Mehr erfahren”.
https://preview.webflow.com/preview/siag-prototype-standard?utm_medium=preview_link&utm_source=designer&utm_content=siag-prototype-standard&preview=44e06814f517d55e32f0f007a2e16143&workflow=preview

What do I do wrong?

It does not matter if I use Chrome, Firefox.

Edit:
I also tried this Code-Snipet:

$(document).ready(function () {    
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });
});

It helps to smooth scroll, but it creates a flicker at the upper border of browser-window (it shows the h1-tag with the text “Projekt”).

Kind regards
Alain

2

Hi @Alain!

I took a look at the site in preview mode and am able to note that it is smooth scrolling - video.

There is only one link in the navbar that is connected to a section.

I am able to note that the navbar is covering the section. In this case I would recommend adding the scroll ID to an element that is higher in the page so the Projekt heading does not get cut off.

3

Hey @johnramos

Meanwhile I found out, that it has to do with the settings of my Operationssystem.

When I active this, then it works:
(I hope you understand a little german :slight_smile: )

image
image1193×802 24.4 KB

(Here is an description in English how to enable/disable that setting on your OS: Micro Center - How to enable or disable Windows Animations in Windows 10)

But I do not understand why it still works on the first website while this OS-Setting is deactivated.
Smooth scrolling also works in the Designer-Mode when I click on a Section-Element.

I just want it to work in every case.
Webflow seems to make something different compared to those Websites.

Is smooth scrolling on the first Website based on Javascript where as it is based on CSS on the second Website?
Some CSS Animations (for example this ones: https://animate.style/) do not work on my Computer when that OS-Setting is deactivated. Thus I guess it has to do with CSS.
Maybe I’m wrong?

4

Any news to this?
How can I enable smooth scrolling that can be relied on no matter what?

5

Alain, don’t fire at me if I have this wrong but have you looked at this
Screenshot 2021-08-19 155146
It was added a while back, before then you had the default you are experiencing.
You can set it globally on the body tag or per ID.

If this works, tick solution and the heart of love or ignore if it doesn’t.

6

No, it does not solve the problem.

Meanwhile I still have that problem on another site (it is a copy of the one above):
https://preview.webflow.com/preview/6465-ruetihaldenstr-uznach?utm_medium=preview_link&utm_source=designer&utm_content=6465-ruetihaldenstr-uznach&preview=f2a541c2b18dbe1e6c38d05d1cbe5f90&workflow=preview

Even in odd old Internet Explorer and Edge Smooth Scrolling works.
But not in Chrome, Firefox and Opera.

Can somebody please help me?