HTML & CSS Animate transition to a <a href="#something" on the same page.

[SpongeBOB]

Hi everyone,

I have the following

<div id="outside">
    <div id="slider">
        <div id="one"><a href="#two" target="_self">one</a></div><div id="two">two</div>
    </div>
</div>

body {
   margin: 0px;
   min-height: 100vh;
   padding: 0;
}
#outside {
   width: 250px;
   height: 400px;
   background-color: lightgreen;
   overflow: hidden;
}
#slider {
   width: 200%;
   transition: all 1s
}
#slider > div {
   display: inline-block;
   width: 250px;
   margin: 0px;
}
#one {
   background-color: lightblue;
}
#two {
   background-color: lightsteelblue
}

So I would like when I click on ONE that the browser scroll within the DIV Slider to the div two. It actually work but the full page seem to refresh and therefore I got no animation ? any ideas ? (With just HTML & CSS ?)

Thanks.

 

[Johna]

Try using smooth scrolling.

* {
  scroll-behaviour: smooth;
}