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

Scroll to page depending on button that is clicked

本文关键字：滚动 按钮 单击      更新时间：2023-09-26

谁能告诉我如何使用jquery scroll-to使黄色菜单上的按钮滚动到相应的部分(即分布到粉红色块)

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

我想大概是这样的:

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

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

工作演示

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

可以有一个像

这样的链接
<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>
相关文章：