Javascript 仅使用Jquery跳转到页面的各个部分

我刚刚开始编写代码，正在学习有关JQuery的所有知识。我有一个带有“关于”和“这是什么”锚的导航栏。各锚定的具体内容位于页面的不同部分。如果我点击一个锚，说“关于”，我想跳转到网页的“关于内容”部分。我读过一些插件，它们可以做到这一点，但是有没有什么方法可以简单地使用JQuery做到这一点呢？我试着按照一个类似问题的答案去做，但不起作用

HTML

---

假设你有一个像这样的

Nav

<ul class="nav navbar-nav">
                    <li class="About"> <a href="#About-content"> About </a></li>
                    <li class="How-it-works"> <a href="#HowItWorks"> How it works </a> </li>   
</ul>

将为各个区域设置动画。这里

散列

保存

标记中

后面的值

---

依我看，最好是绑定

.nav

上的点击事件，而不是单独绑定

。

假设您有一个

nav

<ul class="nav navbar-nav">
                    <li class="About"> <a href="#About-content"> About </a></li>
                    <li class="How-it-works"> <a href="#HowItWorks"> How it works </a> </li>   
</ul>

将为各个区域设置动画。这里

散列

保存

标记中

后面的值

依我看，最好是绑定

.nav

上的点击事件，而不是单独绑定

。

• 将目标

  .About content

  更改为

  #About content

• 将

  href

  更改为

  #关于内容

• 删除

  e.preventDefault（）

它应该在没有jQ/JS的情况下运行，但是如果你在动画中添加了easing，那么它会很有用

$（文档）.ready（函数（）{
$（'.About'）。单击（函数（事件）{
$（'body，html'）。设置动画({
scrollTop:$（“#关于内容”）.offset（）.top
}, 600);
});
});







文本文本文本


将目标
.About content
更改为
#About content
将
href
更改为
#关于内容
删除
e.preventDefault（）

它应该在没有jQ/JS的情况下运行，但是如果你在动画中添加了easing，那么它会很有用


$（文档）.ready（函数（）{
$（'.About'）。单击（函数（事件）{
$（'body，html'）。设置动画({
scrollTop:$（“#关于内容”）.offset（）.top
}, 600);
});
});







文本文本文本

使用目标div的id属性：

<div id="About-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>text text text</p>
            </div>
        </div>
    </div>
</div>

对目标div使用id属性：

<div id="About-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>text text text</p>
            </div>
        </div>
    </div>
</div>

我不知道jquery。但您可以通过引导更简单地实现这一点。这样地。它被称为引导scrollspy。如果你喜欢这个答案，请给它打分。：）



身体{
位置：相对位置；
}
#第1节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#1E88E5；}
#第2节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#673ab7；}
#第3节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#ff9800；}
#第41节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#00bcd4；}
#第42节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#009688；}





第一节
第二节
第三节
我不知道jquery。但您可以通过引导更简单地实现这一点。这样地。它被称为引导scrollspy。如果你喜欢这个答案，请给它打分。：）



身体{
位置：相对位置；
}
#第1节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#1E88E5；}
#第2节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#673ab7；}
#第3节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#ff9800；}
#第41节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#00bcd4；}
#第42节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#009688；}





第一节
第二节
第三节
定义“它不起作用”，它如何不起作用？出了什么问题？您的浏览器控制台中是否有任何错误消息？定义“它不工作”，它如何不工作？出了什么问题？您的浏览器控制台中是否有任何错误消息？不确定您为什么建议使用id，类应该可以正常工作。这很好！谢谢，我非常感谢！我有关于我自己教育的后续问题-1。为什么我们需要将类更改为ID才能使其工作？使用JQuery滚动总是这样吗？2.锚定中的href是否可以是“.About content”来定位类？3.顶部导航栏是固定的，因此当动画发生时，“关于”内容的一部分会被导航栏隐藏。相对于新位置，有没有办法将其向下滚动一点？@KeshavVasudevan Great！别忘了单击绿色复选标记。1.不，你可以使用一个类，jQuery可以使用它，我改为id，因为它是一个可靠的回退，当因为某种原因没有JS时。2.见第1条。3.确保可以使用
offset（）
属性，就像要减去100px一样，然后执行以下操作：
scrollTop:$（“#关于内容”）.offset（）.top-100}，600）不知道你为什么要建议一个id，一个类应该可以很好地工作。这很好！谢谢，我非常感谢！我有关于我自己教育的后续问题-1。为什么我们需要将类更改为ID才能使其工作？使用JQuery滚动总是这样吗？2.锚定中的href是否可以是“.About content”来定位类？3.顶部导航栏是固定的，因此当动画发生时，
<div id="About-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>text text text</p>
            </div>
        </div>
    </div>
</div>

<ul class="nav navbar-nav">
    <li class="About"> <a href="#About-content"> About </a>
    </li>
    <li class="How-it-works"> <a href="#"> How it works </a>
    </li>
</ul>

$(document).ready(function() {
    $(".About a").click(function() {
        $('html, body').animate({
            scrollTop: $("#About-content").offset().top
        }, 2000);
    });
});