javascript - 如何使用动画导航到页面的某个部分？

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

工作 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);
    });