0

Hi i have this code but i need to add some smooth scroll animation to it to make it look nice ,but i dont know how to code or write a line can someone help me where to write the code to smooth scroll to the element and it makes the user feel good seeing other stuff while it auto scrolls to the element

 '''
 <a href="#413695047492935501"><p align="center"> <button class="btn btn1">Download</button> 
 </p></a>


 <style>
  body{
  margin: 0;
  padding: 0;
  }
  .middle{
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-50%,-50%);
  text-align: center;
  }
 .btn1{
  background: #47B2FF;
  border: 2px solid #000000;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  padding: 10px 60px;
  min-width: 300px;
  cursor: pointer;
  transition: color 0.4s linear;
  position: relative;
  }
 .btn1:hover{
 color: #fff;
 }
 .btn1::before{
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}
.btn1::before{
 transform: scaleX(0);
 }
.btn2::before{
 transform: scaleY(0);
 }
 .btn1:hover::before{
 transform: scaleX(1);
 }
.btn2:hover::before{
 transform: scaleY(1);
 }
 </style>

 <script>$('#413695047492935501').onclick=function(){$('html, body').animate({scrollTop: 
 $("413695047492935501").offset().top}, 2000);}</script>'''
Thiz is Sam
  • 25
  • 4

1 Answers1

3

This might be what you are looking for

html {
  scroll-behavior: smooth;
}

Do a simple google search before asking a question here...

Random Kindle
  • 400
  • 1
  • 2
  • 12
  • it isnt working it stll scroll down in a rapid ,i want to make a smooth animation for atleast 0.10sec to scroll to the eelement – Thiz is Sam Apr 28 '22 at 01:22
  • @ThizisSam You may have to use Javascript or jQuery to do that... Refer the answer [here] (https://stackoverflow.com/questions/10063380/smooth-scroll-without-the-use-of-jquery) or [here](https://alvarotrigo.com/blog/jquery-smooth-scroll/) – Random Kindle Apr 28 '22 at 04:58