滾動到頁面，具體取決於單擊的按鈕

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>