What's the best way to add a scroll down animation when a button is clicked?

Question

I've been out of web development for a bit and I can't remember if you need JS/Jquery to add a page scroll animation or if you can use CCS3 and HTML5.

Basically I have a button that looks like this:

<li><a href="#" class="button special">Get in touch</a></li>

It's at the top of the page in the header. When it's clicked, I'd like the page to scroll down slowly to the contact form section. I'm not sure how to do this. I do remember something about anchoring with links, but even if I did that it wouldn't have an animation it would just take me to the section abruptly. What's the best way I could implement a scroll down animation upon clicking the button?

Thanks for your time.

there are lots of similar questions e.g. http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div — Even, Aug 04 '16 at 23:47

score 1 · Accepted Answer · answered Aug 05 '16 at 00:41

1

You can achieve this with jQuery's animate property.

Just put a div at the end of your body, and scroll to it like this :

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

demo here

answered Aug 05 '16 at 00:41

Rust in Peace

176
2
8

Exactly what I was looking for! Thank you. – Aug 05 '16 at 04:26

What's the best way to add a scroll down animation when a button is clicked?

1 Answers1