Question

任何人都可以向我解释如何使用jquery scroll-to使黄色菜单上的按钮滚动到相应的部分（即分布到粉红色块）

我认为它是这样的：

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

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

Answer 1

Working Demo

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

所以我做了改变＆amp;只需将相应的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>

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

2 个答案: