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

Question

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

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

如何让它顺利滚动到div而不是跳转？我查看了一些jQuery选项，但它们不能正常使用href。

Answer 1

$('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/