可以使用jquery跳转到页面的某个部分，基于它的div类？

Question

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

开头的链接

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

我看到是否可以通过jQuery，并想知道我是否会遇到任何问题，使用该方法（除了禁用javascript的用户）。

Answer 1

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

修改
这里的关键是使用.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;
    });
});

Answer 2

这适用于所有浏览器，不需要$ .scrollTo插件。只需与<a href="#content-body">建立链接，它就会转到正确的位置。

$('a[href="#content-body"]').click(function(){
    $('html,body').scrollTop( $('.content-body').offset().top );
    return false;
});

如果要为滚动设置动画，请执行此操作。 （你可以用动画所需的速度替换500）

$('a[href="#content-body"]').click(function(){
    $('html,body').animate({
        scrollTop: $('.content-body').offset().top
    }, 500);
    return false;
});

由于您使用类来选择元素，因此可能存在多个具有类“content-body”的DOM节点。这将滚动到第一个。如果你想滚动到第n个，请执行此操作。 （您可以用您想要的编号元素替换n）

$('a[href="#content-body"]').click(function(){
    $('html,body').scrollTop( $('.content-body').eq(n).offset().top );
    return false;
});