平滑滚动到页面上的锚点？

Smooth scrolling to an anchor on page?

这是我正在使用的可点击 div 的 HTML：

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

我怎样才能让它平滑地滚动到 div 而不是跳转？我查看了一些 jQuery 选项，但它们在使用 href 时不起作用。

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

https://jsfiddle.net/fzctqoq7/1/

编辑：

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

https://jsfiddle.net/eo6g642c/