Adding scroll animation to page jump URL in navbar

Question

I'm trying to make a smooth scroll when I press a link (in this case Contact us) to an anchor tag (#contact_us) present in a different section but on the same page.
The issue is that there is no smooth scroll whatsoever, it just immediately sends me to the anchor tag.
How can I make sure that there is a smooth scroll effect when I press the link?
Should I use JS or just CSS (if such a thing is possible) because I'm using PHP?

Thanks in advance for the tips :D.

Answer 1

You can add smooth scroll this way. Check console log error if any other script get conflict.

$(".scrollMe").click(function() {
    $('html, body').animate({
        scrollTop: $(".bottom").offset().top
    }, 1000);
});

.top{background: green;height:700px;width:100%;}
.bottom{background: pink;height:700px;width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a class="scrollMe" href="#">Scroll Down</a>
<div class="top">
</div>

<div class="bottom">
</div>

Answer 2

You can do this with a small bit of css:

body{ scroll-behavior: smooth; }

Check out the Mozilla docs for more info