Smooth scrolling not smooth scrolling (Inline CSS)-CodePudding

I want to add the smooth scrolling effect so users can go straight to the bottom of the page to fill out a form. I need to add the smooth scrolling effect using inline CSS. I used the code below but I'm not sure why is not working?

/* added by edito for visualization purpose */
a {
  display: block;
  margin-bottom: 400vh;
}

<div>
  <a href="#quick-contact" style="scroll-behavior: smooth;">REGISTER NOW</a>

  <div id="quick-contact" >
    <h4>REGISTER NOW</h4>
  </div>
</div>

CodePudding user response：

scroll-behavior: smooth needs to bet applied to the scrolling element which by default would be html:

/* added by edito for visualization purpose */
a {
  display: block;
  margin-bottom: 400vh;
}

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

<body>
  <div>
    <a href="#quick-contact">REGISTER NOW</a>

    <div id="quick-contact" >
      <h4>REGISTER NOW</h4>
    </div>
  </div>
</body>

</html>

CodePudding user response：

I would suggest using the latest scrollIntoView() or scrollTo() function using JavaScript. You can check [MDN Doc][1]s, because scroll-behavior:smooth doesn't have all browser support plus we can't make customisations.

LOGIC YOU NEED :.

let link = document.querySelector('a');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(){
   targetElement.scrollIntoView({behavior: "smooth"});
});

MAKE THE FOLLING CHANGES IN HTML AND TRY THIS, CODE, I FIND IT THE SIMPLEST

let link = document.querySelector('.link');
let targetElement = document.querySelector(".quick-contact");

link.addEventListener('click', function(e){
   e.preventDefault();
   targetElement.scrollIntoView({behavior: "smooth"});
});

    .main {
      height:290vh;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    a {
      flex:1;
    }

    <div >
      <a href="#" >REGISTER NOW</a>

      <div >
        <h4>REGISTER NOW</h4>
      </div>
    </div>

CodePudding user response：

body {
  scroll-behavior: smooth;
}