Javascript 单击链接时在导航中使用jQuery-转到目标页面，然后滚动到页面的特定部分

好的，我在这里四处看了看，看到一些类似的问题贴出来了，但是我不理解关于我的问题的答案。因此，如果这是重复别人发布的问题，请道歉

我的问题

我在Concrete5平台上建立了一个多页面的网站。我有几个部分-主页、产品、关于和联系

在about页面中，有3个部分（我们是谁，产品开发和我们的故事）-所有这些部分都被设置为100vh并填充屏幕，然后使用jQuery滚动功能滚动这些部分，允许使用鼠标滚轮上下滚动（页面一次滚动整个100vh部分）-因此，它具有与此相同的效果-它还包含类似的“点”，可以单击以向上或向下滚动。我用身份证得到这个

我需要的是，在“关于”选项卡上的导航中，它有一个子菜单，其中包含三个部分链接（目前这些链接都位于“关于”页面的顶部）

我试过这个www.example.com/about#our story等-这不起作用，因为concrete 5似乎把它当作一个新页面来阅读，只是显示了一个没有内容的空白页面

因此，我需要的是子菜单链接将用户带到“关于”页面，然后一旦加载-转到并找到相关部分，即如果用户单击“我们的故事”链接，它将转到“关于”页面，然后向下滚动到“我们的故事”部分

有什么想法吗

对于任何能提供解决方案的人，我都不知道你是谁。如果你想付款，我可以告诉你我没有钱。但我确实拥有一套非常特殊的技能，这些技能是我在很短的职业生涯中获得的。这些技能使我成为jQuery开发人员的能力非常差。如果你现在帮我，那就完了。但如果你不这样做，我将在接下来的几个小时里挣扎——也许几天，如果你帮助我，我不会，我将欠你：P

---

谢谢

您可以像这样使用jQuery动画：

 <script>
        $(document).ready(function () {
            $("html, body").animate({ scrollTop: $('.MySecondSection').offset().top - 90 }, 2000, function () {
            });
        });

    </script>

点击我！
2

您只需要一个html链接锚吗

创建链接

然后，您需要在页面中要跳转到的位置设置一个目标：

<a name="anyword">Jump to this place</a>

跳到这个地方

您需要提供页面扩展名，如

www.example.com/about.html 35;我们的故事

如果您正在寻找类似的内容，那么我可以帮助您“我已经尝试过这个www.example.com/about#我们的故事等”。你有没有试过“www.example.com/about.html#我们的故事”你有没有使用脚本来创建用户友好的URL？Munawir-是的，试过了。Ram singh-这只是通过平台完成的，所以如果可能的话我不想玩这个。嗨，Salman，谢谢你的回复。这怎么知道什么时候触发呢？ie如果在页面加载之前点击，它怎么知道转到第二部分？谢谢所以我有这个<代码>$（“li.item_172 a”）。单击（函数（）{$（“html，body”）。动画（{scrollTop:$（“#我们的故事”）。偏移量（）.top-90}，2000，函数（）{}；}）它不起作用-想法？您是否已将jquery库添加到页面中？尝试发出警报（“ok”）；在函数中，检查它是否被触发。嗨，Salman，是的，添加了-刚刚尝试了警报，点击后弹出良好-然后加载“关于”页面-但是没有滚动？谢谢，请选择这个作为答案，这样可能会对其他人有所帮助。嗨，谢谢你的回答，我不明白你的意思？我提到，当点击链接时，这在链接中不起作用-因此子菜单上的链接必须是简单的…com/about，然后一旦它到达页面，它需要触发相应的调用以转到该部分。那么它将如何做到这一点呢？谢谢你的链接应该是这样的：

，你的about页面上的锚应该是这样的：

about

嗨，Dawcars，问题是，这只是一个页面，所以about页面是子页面，正如我提到的about Concrete 5呈现www.website.com/about#about“作为一个与www.website.com/about完全不同的页面，所以当我把这个链接放进去时，它只是打断了它？谢谢，您可能只需要href中的

，而不是完整路径，因此它会停留在同一页面中，但会跳转到锚点。嗨，Dawcars-不，问题是用户不在关于页面上时，例如主页上时。因此，我认为这是一个JS的东西-因为它需要先转到关于页面，然后再做一些事情。我认为如果用户已经在about页面上，那么您的建议会起作用。谢谢Munawir，尝试了这个，它只是打破了东西-C5似乎不喜欢任何与#的链接。谢谢

<a name="anyword">Jump to this place</a>