滚动到页面，具体取决于单击的按钮

Question

谁能向我解释如何使用jquery滚动使黄色菜单上的按钮滚动到其相应部分（即分配到粉红色块）

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

我认为是这样的：

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

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

Answer 1

工作演示

首先，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);
});

Answer 2

您可以有一个类似的链接

<a href="#section1" class="nav">Click to jump to section 1</a>

和类似的部分

<div id="section1">
    <p>Section 1 content</p>
</div>

并像这样处理滚动

<script type="text/javascript">
    $(".nav").click(function (event) {
        event.stopPropagation();    
        var theHref = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(theHref).offset().top + $(".section").height()
        }, 500);
    });
</script>