CODEWITHSUNDEEP
htmlcss
James Lee
James Lee

Reputation: 926

scroll behaviour smooth not working at all

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><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>

Upvotes: 50

Views: 132461

Answers (21)

Murtaza Abdullah
Murtaza Abdullah

Reputation: 11

#container{
    overflow-y: scroll;

    scroll-behavior: smooth !important;
}

.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;
}

You might try this one

Upvotes: 0

The Jared Wilcurt
The Jared Wilcurt

Reputation: 349

Used a small library because browsers/OS's don't reliably work with the built in smooth scroll.

npm install --save zenscroll

import zenscroll from 'zenscroll';

zenscroll.setup();

Upvotes: 0

Sunamin34
Sunamin34

Reputation: 408

There's one solution that I use in all my projects and works all the time and only requires CSS:

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

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

Upvotes: 1

Artem
Artem

Reputation: 51

I tried everything and nothing worked. Until i tried the last solution. Apparently windows 11 by default got "Animation effects" turned off. I didnt even know that. So i turned it on and everything started working. Tbh im not sure what is the relationship between animation parameter in windows settings and my browser. But apparently there's some kind of connection.

Upvotes: 5

Malte
Malte

Reputation: 33

Moin, if you have a container, you need to set the scroll behavior separately.

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

You can also use the following code to make the entire website scroll smoothly

* {
    scroll-behavior: smooth;
}

Upvotes: 1

harupiyo
harupiyo

Reputation: 1

In my case, I had to turn on settings - easy operations - show animation in Windows in Windows 10. (Check this setting if the mouse wheel scrolling is not smooth to begin with, regardless of the scroll-behavior in the CSS.)

Upvotes: -1

Sebak Thapa
Sebak Thapa

Reputation: 321

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.

Upvotes: 4

Mike
Mike

Reputation: 636

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.

Upvotes: 0

Francisco Gomes
Francisco Gomes

Reputation: 1897

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.

Upvotes: 1

Prakhar Sahu
Prakhar Sahu

Reputation: 11

I tried all the solutions but got nowhere.

Biggest steps I took to fix it in my system were:

  1. Restarting my frontend client.
  2. Putting overflow-y: "auto"
  3. 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;
}

Upvotes: 1

Robert Yeomans
Robert Yeomans

Reputation: 376

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.

Upvotes: 0

Piyush Yadav
Piyush Yadav

Reputation: 219

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] 1

Upvotes: 21

Kornelijus Sl
Kornelijus Sl

Reputation: 71

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.

Upvotes: 3

Adam
Adam

Reputation: 795

you have to override the current auto scroll settings by putting !important into your css code.

*, html {

    scroll-behavior: smooth !important;
}
```

Upvotes: 60

Joel B Eapen
Joel B Eapen

Reputation: 1

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;" >

Upvotes: 0

Michael Scarn
Michael Scarn

Reputation: 168

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
    }

Upvotes: 16

Petros
Petros

Reputation: 76

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"

Upvotes: 4

Aniket Sharma
Aniket Sharma

Reputation: 640

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

Upvotes: 54

niko
niko

Reputation: 116

in case anyone has problems with this with Vue:

Adding


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

to App.vue worked for me!

Upvotes: 5

Inc33
Inc33

Reputation: 1921

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.

Upvotes: 2

Ashish Sondagar
Ashish Sondagar

Reputation: 1093

  • 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><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>

Upvotes: 10

Related Questions