Smooth scrolling to an anchor on page?

Here is the HTML for the clickable div I am using:

        <div class="arrow bounce" id="down-arrow" onclick="location.href='#about-me';">

How can I get this to scroll smoothly to the div rather than jump? I've looked at some jQuery options but they don't work as they use a href.

Solution

$('html, body').animate({
    scrollTop: $(".about-me").offset().top
 }, 2000);

Edit:

$('#down-arrow').click(function () {
    $('html, body').animate({
        scrollTop: $("#about-me").offset().top
    }, 2000);
});