scroll behaviour smooth not working at all - html

Question

I am wondering why my scroll smooth isn't working at all. I am not too sure why? I thought adding overflow-y: scroll; scroll-behavior: smooth; will help but its not working. Here is my code:
#container{
overflow-y: scroll;
scroll-behavior: smooth;
}
.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>1</li>
<li>2</li>
<li>3</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>

Answer 1

I was facing the same issue in modern Chrome (e.g. in version 88.0.4324.182) but I then enable the smooth scrolling flag using the below-mentioned URL :
chrome://flags/#smooth-scrolling

Answer 2

you have to override the current auto scroll settings by putting !important into your css code.
*, html {
scroll-behavior: smooth !important;
}
```

Answer 3

Try this one...
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>1</li>
<li>2</li>
<li>3</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>

Answer 4

If adding scroll-behavior:smooth to html is not working, what worked for me is adding it to the body as well.
html, body {
scroll-behavior: smooth
}

Answer 5

In my case, it wasn't working because of my windows setting for best performance where I had disabled all animations. Turning it off did the required work
[Type Adjust the appearance and performance of Windows in the start menu to get this dialog box and enable all]

Answer 6

First ensure if your browser is compatible with the scroll-behavior or not.
Check browser compatibility with scroll-behavior
If your browser is compatible with this property but still smooth scroll is not working
then this is not fault or error in code but you have to change a small setting of your browser.
If you are on chrome browser go to URL "chrome://flags/" depending upon your browser and press ctrl+f to open find dialogue-box and search for smooth scrolling and simply enable it and re-launch browser to make changes.

Answer 7

in case anyone has problems with this with Vue:
Adding
<style>
html {
scroll-behavior: smooth;
}
</style>
to App.vue
worked for me!

Answer 8

I solved my problem with chrome by using this:
html:focus-within {
scroll-behavior: smooth;
}
More on the subject is posted on Css-tricks "Fixing Smooth Scrolling with Find-on-Page"

Answer 9

Unfortunatelly this will also stop working if your device "prefers-reduced-motion"...
I always thought overwriting stuff that's not "auto" by nature, is bad practice, but this seems to be a thing now.

Answer 10

While reading some of the answers got an idea to check if windows performance settings could be somehow related, and after switching to "adjust for best appearance" in System Properties > Performance Options scrolling became smooth.

Answer 11

I made a custom solution with the easeOutSine function:
function scrollTop (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(() => {
scrollTop(initial);
}, 10);
}
}
function easeOutSine(x: number): number {
return Math.sin((x * Math.PI) / 2);
}
since smooth isn't stable on my tests and I can't depend on the user enabling a flag.
You can tune the speed by changing the setTimeout's second argument.

Answer 12

Paste the below link in your browser which you are going to use as the live server:
chrome://flags/#smooth-scrolling
Then, a new tab will open up and then you can enable the smooth scrolling option and relaunch the tab. For putting the smooth scrolling action into your website, you have to put the below code in your code editor:
<html lang="en" style="scroll-behavior: smooth;" >

Answer 13

Just a little thing to check... I had the same issue but eventually realised / realized that I was spelling 'behaviour' the English way and not the American-English way. scroll-behavior: smooth; should work on the html selector if correctly spelled. Though I appreciate that this was not the case for #James_Lee.

Answer 14

I tried all the solutions but got nowhere.
Biggest steps I took to fix it in my system were:
Restarting my frontend client.
Putting overflow-y: "auto"
Placing scroll-behavior : smooth in html outside container was not generating the desired result so I put it back inside the container and now it works
Note: I did these CSS changes for the parent container while doing same in the actual container also didn't help me.
#container{
overflow-y: auto;
scroll-behavior: smooth;
}

Answer 15

My problem was really simple, but maybe someone else is making the same mistake, hence this answer.
For me I had changed my anchor links from
<a href="#Home">
to
<a href="index.html#Home">
The anchor links behavior was indeed smooth scrolling within my IDE's server's preview browser as well as locally in my browsers.
However, once I published to Cloudflare Pages the smooth scrolling changed to jumping.
I changed the anchor link back to
<a href="#Home">,
which brought smooth scrolling back to my staging site on Cloudflare Pages.