Carson Clark Carson Clark - 2 months ago 5x
jQuery Question

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

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.


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