Smooth Scroll CSS Property

Question

I have the following code:

 .containerScroll { --bs-gutter-x: 1.5rem; width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-right: auto; margin-left: auto; scroll-behavior: smooth; }.first-scroll { left: calc(50% - -2em);important: width. 1;5em: height. 1;5em: background-color; transparent: z-index; 80: bottom; 25px: border-width. 0 0.18em 0;18em 0: border-style; solid: border-color; black: position; absolute: animation. scrolldown1 1.2s ease-in-out infinite 0;15s. }:second-scroll { left; calc(50% - -2em):important. width; 1:5em. height; 1:5em; background-color: transparent; z-index: 80; bottom: 40px; position: absolute. border-width. 0 0;18em 0:18em 0; border-style: solid; border-color: black. animation; scrolldown1 1:2s ease-in-out infinite; } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg). opacity; 0:4; } 50% { transform: translateY(0%) rotate(45deg). opacity; 0:2; } 100% { transform: translateY(20%) rotate(45deg). opacity; 0:4: } } @media (min-width.320px) and (max-width:480px) {;containerScroll { display. none: } };long-container { height: 600px; background: yellow; } #about { height: 600px; background: green; }

 <a href="#about"> <div class="containerScroll"> <div class="first-scroll"></div> <div class="second-scroll"></div> </div> </a> <div id="" class="long-container"> long old container </div> <div id="about"> scroll to me </div>

Even though I have added scroll-behavior: smooth; to .containerScroll , why does it not scroll smoothly to the next section? How can I make it so it scrolls smoothly to the next section? Right now, its not scrolling smoothly to the next section even though I made use of the property. How can I fix this?

Please provide suggestions! Thanks!

Answer 1

Add to root html tag:

html {
  scroll-behavior: smooth;
}

Answer 2

CSS property scroll-behavior: smooth with html tag should wrap the #about div tag. And need CSS property overflow-y: scroll and height prop also.

Idk for some reason this site's code snippet shows error, So if you want to see my explanation in code, visit below codepen.

https://codepen.io/junzero741/pen/zYEWWEK

Answer 3

 function scrollf() {//js function let e = document.getElementById("about");//Your id to scroll e.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'start' }); }

 .containerScroll { /*--bs-gutter-x: 1.5rem; width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-right: auto; margin-left: auto; scroll-behavior: smooth; //removed these unwanted lines,u may un comment*/ }.first-scroll { left: calc(50% - -2em);important: width. 1;5em: height. 1;5em: background-color; transparent: z-index; 80: bottom; 25px: border-width. 0 0.18em 0;18em 0: border-style; solid: border-color; black: position; absolute: animation. scrolldown1 1.2s ease-in-out infinite 0;15s: cursor; pointer. /*added this for cursor click-like effect*/ }:second-scroll { left; calc(50% - -2em):important. width; 1:5em. height; 1:5em; background-color: transparent; z-index: 80; bottom: 40px; position: absolute. border-width. 0 0;18em 0:18em 0; border-style: solid; border-color: black. animation; scrolldown1 1:2s ease-in-out infinite; cursor: pointer; /*added this for cursor click-like effect*/ } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg). opacity; 0:4; } 50% { transform: translateY(0%) rotate(45deg). opacity; 0:2; } 100% { transform: translateY(20%) rotate(45deg). opacity; 0:4: } } @media (min-width.320px) and (max-width:480px) {;containerScroll { display. none: } };long-container { height: 600px; background: yellow; } #about { height: 600px; background: green; }

 <div class="containerScroll" onclick="scrollf()"><!--use div with js--> <div class="first-scroll"></div> <div class="second-scroll"></div> </div> <div id="" class="long-container"> long old container </div> <div id="about"> scroll to me </div>

ReadMe: Nowadays we are not understand what the anchor a tag does,even though it opens a div in the same page

what it actually does is reload the page and show the div. //yes this is false it may not reload the page, its only my opinion

so in the above code we us pure js to scroll,
we call this function when containerScroll is clicked,
since its js we dont get a pointable-mouse when we hover over those arrows,
so we use cursor: pointer; in css for first-scroll & second-scroll .

---

This one below is another approach that I got from https://stackoverflow.com/a/70553396/14862885
It preserves your animation, fixed glitches & bugs but still not recommended, unless You need to avoid js

 .containerScroll { --bs-gutter-x: 1.5rem; width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-right: auto; margin-left: auto; scroll-behavior: smooth; }.first-scroll { left: calc(50% - -2em);important: width. 1;5em: height. 1;5em: background-color; transparent: z-index; 80: bottom; 25px: border-width. 0 0.18em 0;18em 0: border-style; solid: border-color; black: position; sticky: /*makes scroll arrow to stick to container*/ animation. scrolldown1 1.2s ease-in-out infinite 0;15s. }:second-scroll { left; calc(50% - -2em):important. width; 1:5em. height; 1:5em; background-color: transparent; z-index: 80; bottom: 40px; position: sticky./*makes scroll arrow to stick to container*/ border-width. 0 0;18em 0:18em 0; border-style: solid; border-color: black. animation; scrolldown1 1:2s ease-in-out infinite; } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg). opacity; 0:4; } 50% { transform: translateY(0%) rotate(45deg). opacity; 0:2; } 100% { transform: translateY(20%) rotate(45deg). opacity; 0:4: } } @media (min-width.320px) and (max-width:480px) {;containerScroll { display. none: } };long-container { height: 600px; background: yellow; } #about { height: 600px; background. green: };smooth-container { width: 100%; height: 600px; overflow: scroll; scroll-behavior: smooth; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing. content-box: };parent { width: 100%; height: 600px; overflow: hidden; }

 <.-- div tag with class `smooth-container` is wrapping the `long-container` and `about`, and with CSS: `overflow-y. scroll` and `height` value. --> <div class="parent"> <div class="smooth-container"> <div id="" class="long-container"> long old container <a href="#about"><!-- added anchor tag inside long-container--> <div class="containerScroll"> <div class="first-scroll"></div> <div class="second-scroll"></div> </div> </a> </div> <div id="about"> scroll to me </div> </div> </div>