javascript - 可以使用 jquery 根据其 div 类跳到页面的特定部分吗？

Question

我想要一个将页面滚动到 <div class="content-body"> 开头的链接

与:<a href="#maincontent">Skip</a> 相同的功能，并放置 <a name="maincontent"></a>就在<div class="content-body">旁边

我想知道是否可以通过 jQuery 实现，并且想知道使用该方法是否会遇到任何问题(除了禁用 javascript 的用户之外)。

Answer 1

我建议您查看scrollTo插入。查看this jsFiddle 上的示例。

编辑
这里的关键是使用 .offset().top 作为滚动到的位置。这是元素相对于文档的顶部(相对于其父定位容器的 .position().top )。您还可以使用built-in function .scrollTop(value) 如果您不希望滚动动画或不想使用插件。

编辑2
另请注意，您可以在这部分使用任何您想要的选择器: $('div:nth-child(1)').offset().top 在您的情况下，您需要 $('div.content-body').offset().top。请记住 .offset() 仅返回第一个匹配元素的位置。

示例
HTML

<div id="first" style="background:red;">
    <a href="#" class="go1">First</a>
    <a href="#" class="go2">Second</a>
    <a href="#" class="go3">Third</a>
</div>
<div id="second" style="background:blue;">
    <a href="#" class="go1">First</a>
    <a href="#" class="go2">Second</a>
    <a href="#" class="go3">Third</a>
</div>
<div id="second" style="background:green;">
    <a href="#" class="go1">First</a>
    <a href="#" class="go2">Second</a>
    <a href="#" class="go3">Third</a>
</div>

CSS

div {
    height:1000px;
}

JavaScript

$(function() {
    $('.go1').click(function() {
        $.scrollTo($('div:nth-child(1)').offset().top, 500);
        return false;
    });
    $('.go2').click(function() {
        $.scrollTo($('div:nth-child(2)').offset().top, 500);
        return false;
    });
    $('.go3').click(function() {
        $.scrollTo($('div:nth-child(3)').offset().top, 500);
        return false;
    });
});