如何使用动画导航到页面的一部分？

Question

在一个页面中，如果我们有像这样的HTML

我们点击标记，它会导航到特定部分，这很好

<a href="#shushi">Sushi</a>
<a href="#bbq">BBQ</a>

Sample Page:
<div id='sushi'></div>
<div id='bbq'></div>

但是当我们点击它shushi和bbq并导航到那个部分时，是否可以添加一些动画效果？

类似的东西：

$([some id]).animate({scrollTop: $elem.height()}, 800);

Answer 1

这应该有效：

$('html, body').animate({scrollTop: $elem.scrollTop()}, 800);

http://api.jquery.com/scrolltop/

Answer 2

正在使用 DEMO

$(document).on("click","a",function(e){
        e.preventDefault();
        var id = $(this).attr("href"),
            topSpace = 30;
        $('html, body').animate({
          scrollTop: $(id).offset().top - topSpace
        }, 800);
    });