javascript - 根据单击的按钮滚动到页面

Question

谁能向我解释一下如何使用jquery滚动到使黄色菜单上的按钮滚动到其相应的部分(即分布到粉红色 block )

这是我的代码:http://jsfiddle.net/VXkW5/5/

我认为是这样的:

$(".nav").click(function () {
    $('html, body').animate({
        scrollTop: $(".section").offset().top + $(".section").height()
    }, 500);
});

但我不知道如何根据单击的链接将其与相关部分关联起来。

Answer 1

Working Demo

首先，ID在页面中必须是唯一的。我看到两者都使用相同的 ID

所以我做了更改，只需将相应的 div id 添加到 href 标签，点击时就会转到该特定的 div

<a href="#posting" class="nav">posting</a>
<a href="#distribution" class="nav">distribution</a>
<a href="#application" class="nav">applicantions</a>

就 jQuery 而言:

$(".nav").click(function (e) {
    e.preventDefault();
    var divId = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(divId).offset().top;
        }, 500);
});