Jumping inside a page

Jumping inside a page


I want to click a ‘button’ that looks like this:
<…a href="#proceed" class=“btn”>Get Started<…/a>

Where CSS for class btn is:

.btn {
        border-radius: 9px;
        font-family: sans-serif;
        color: #036A81;
        font-size: 20px;
        padding: 10px 20px;
        border: solid #036A81 3px;
        text-transform: uppercase;
        text-decoration: none;

.btn:hover {
    color: #fff;
    border: solid #fff 3px;   

and it leads to this few paragraphs below:
<…a id=“proceed”><…/a>

And it works just fine. But I want to see quick scolling when I click the ‘button’, not to be instantly teleported to the section below.
I that possible?

P.S. I’ve typed … in <…a> so that it would put words, not compile code.


That’s a javascript thing what you are looking for. I call it smooth scrolling. I think you can accomplish that using jquery. But I don’t use jquery. So can’t tell you how to do it.

I did it with vanilla js. https://cowwy.github.io/project3/


Here is a useful link : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll