To modify the existing auto scroll configurations, make sure to include !important in your CSS code.

*, html {

    scroll-behavior: smooth !important;
}

I encountered a problem with my computer where certain functions were not working properly. After investigating, I discovered that the issue was due to my Windows settings for peak performance, which had disabled all animations. Once I turned off this setting, everything started functioning as expected. [To access the appearance and performance settings in Windows, you can simply type "Adjust the appearance and performance of Windows" into the start menu search bar to bring up the dialog box and re-enable all animations]

For those struggling with getting scroll-behavior:smooth to work on the html element, a simple solution that worked for me was also adding it to the body element.

    html, body { 
      scroll-behavior: smooth
    }

• Give this a shot...

html {
  scroll-behavior: smooth;
}

#container{
    overflow-y: scroll;
}
.topTab{
bottom: 0;
position: fixed;
font-size: 25px;
color: white;
}
.pg{
  font-size: 100px;
  height: 100vh;
  background-color: blue;
  text-align: center;
}

a{
 color: white;
}

<div class = "topTab">
  <li><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
</div>

<div id = "container">
<div id = "1" class= "pg">1</div>
<div id = "2" class = "pg">2</div>
<div id = "3" class = "pg">3</div>
</div>

If you encounter issues with this in Vue:

Simply include the following code snippet

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

in your App.vue file.

After exhausting all options with no success, I finally attempted the last solution. Surprisingly, it turns out that Windows 11 had "Animation effects" disabled by default. This was news to me. Once I enabled it, everything began functioning properly. It's puzzling how altering an animation setting in Windows could impact my browser, but there seems to be a correlation.

My issue with Chrome was resolved when I applied the following solution:

html:focus-within {
  scroll-behavior: smooth;
}

For further information, check out Css-tricks article titled "Improving Smooth Scrolling with Find-on-Page"

Make sure to check if your browser supports the scroll-behavior property.

Verify browser compatibility for scroll-behavior

If your browser is compatible with this feature but smooth scrolling still isn't working, don't worry, it's not an issue with your code. You just need to adjust a small setting in your browser.

If you are using Chrome, navigate to "chrome://flags/", use ctrl+f to search for smooth scrolling, enable it, and then restart your browser to see the changes take effect.

While browsing through various responses, I came across a suggestion to investigate the relationship between Windows performance settings and scrolling smoothness. Upon changing the settings to "adjust for best appearance" in System Properties > Performance Options, I noticed a significant improvement in scrolling fluidity.

Unfortunately, this functionality will cease to operate if your device has a preference for reduced motion...

I used to believe that overriding elements not set to "auto" was poor practice, but it appears to be common now.

No matter how hard I tried, I couldn't find a solution.

The steps that finally brought success to my system were:

1. Restarting the frontend client.
2. Adding overflow-y: "auto"
3. Moving scroll-behavior : smooth from html outside container to inside container fixed the issue

Note: Applying these CSS changes to the parent container instead of the actual container did not resolve the problem for me.

#container{
    overflow-y: auto;
    scroll-behavior: smooth;
}

After experimenting with different options, I developed a personalized solution using the easeOutSine function:

function scrollAnimation (initial?: number) {
  if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollTop > 10) {
    if (typeof initial === 'undefined') initial = document.documentElement.scrollTop;

    const progress = (initial - document.documentElement.scrollTop + 1)/initial;
    document.documentElement.scrollTo({top: initial*(1-easeOutSine(progress))});
    setTimeout(() => {
      scrollAnimation(initial);
    }, 10);
  }
}

function easeOutSine(x: number): number {
  return Math.sin((x * Math.PI) / 2);
}

Since the default smooth option was not consistent in my tests and I could not rely on user settings, this tailored approach proved to be more reliable.

You have control over the animation speed by adjusting the time interval in the setTimeout function.

Hey there, when working with a container, it's important to specify the scroll behavior separately.

#container {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

If you want the entire website to scroll smoothly, you can use this code snippet:

* {
    scroll-behavior: smooth;
}

Here's a simple CSS solution that I implement in all of my projects - it works consistently and efficiently:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  scroll-behavior: smooth;
}

html {
  --scroll-behavior: smooth !important;
  scroll-behavior: smooth !important;
}

To set up smooth scrolling on your live server, simply copy and paste the following link into your browser:

chrome://flags/#smooth-scrolling 

Once you have done that, a new tab will open where you can enable the smooth scrolling option before relaunching the tab. If you want to incorporate smooth scrolling into your website, make sure to include the following code in your code editor:

<html lang="en" style="scroll-behavior: smooth;" >

After some troubleshooting, I discovered that my problem stemmed from using the English spelling of 'behaviour' instead of the American-English version. When properly spelled, scroll-behavior: smooth; should function correctly with the html selector. It seems this issue did not apply to @James_Lee.

While my issue may have seemed trivial, it's possible that others are facing the same problem and could benefit from this solution.

In my case, I mistakenly altered my anchor links from <a href="#Home"> to

<a href="index.html#Home">

Initially, the anchor links smoothly scrolled within my IDE's server preview browser and locally in all browsers. However, once I uploaded my site to Cloudflare Pages, the smooth scrolling was replaced with a jumpy effect.

Reverting the anchor link back to <a href="#Home">, restored the smooth scrolling functionality on my staging site hosted on Cloudflare Pages.

Utilized a petite library due to the inconsistency of browsers/OS's in working with the native smooth scroll feature.

npm install --save zenscroll

import zenscroll from 'zenscroll';

zenscroll.setup();

• https://github.com/zengabor/zenscroll

#wrapper{
    overflow-y: auto;

    scroll-behavior: smooth !important;
}

.headerTab{
bottom: 0;
position: fixed;
font-size: 25px;
color: white;
}
.content{
  font-size: 100px;
  height: 100vh;
  background-color: blue;
  text-align: center;
}

a{
 color: white;
}

Give this code snippet a shot!