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.

score 2 · Answer 1 · answered Dec 22 '20 at 14:40

2

You can do this with a small bit of css:

body{ scroll-behavior: smooth; }

Check out the Mozilla docs for more info

answered Dec 22 '20 at 14:40

Dave Hearne

205
1
6

Let me know if that works for you, it is supported on most modern browsers: https://caniuse.com/?search=scroll-behavior – Dave Hearne Dec 22 '20 at 15:22

score 1 · Answer 2 · answered Dec 22 '20 at 14:36

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>

answered Dec 22 '20 at 14:36

Vishal

235
1
15

The thing is I'm using PHP not HTML and fore some reason it isn't working but I will try again – Vedo Dec 22 '20 at 14:43
@Don can you share the scroll part of the php code . – Vishal Dec 22 '20 at 14:45
Contact us – Vedo Dec 22 '20 at 14:47
Did you check the console is there any error. – Vishal Dec 22 '20 at 14:48

Adding scroll animation to page jump URL in navbar

2 Answers2