使用jQuery滚动到页面上指定的元素

Question

你好，我在使用jquery或javascript将页面滚动到特定元素时遇到了很大的问题。

我尝试了许多方法，但都失败了。该网站是使用名为curtain.js的框架库实现的 https://github.com/victa/curtain.js。

我尝试过的方法包括：

1)https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView?redirectlocale=en-US&redirectslug=DOM%2Felement.scrollIntoView

2)How to go to a specific element on page?

3) 我甚至尝试了使用锚点标签的最简单方法，但没有任何反应。

唯一有效的方法是scrollTop()，正如页面上其他链接所示。不幸的是，这对我来说不起作用，因为它无法适应不同的屏幕尺寸。

你可以在http://pagota.herobo.com上看到该网站的示例。

谢谢！

- anjelott1

---

@Joonas 我尝试了你发给我的帖子中的第一个示例，但它给出了 TypeError: $(...).offset(...) 为空。 - anjelott1

它是在这个 jsfiddle 中给你的错误：http://jsfiddle.net/lollero/ZVdRt/？还是在你将代码实现到你的网站后出现了错误？ - Joonas

在我尝试在我的网站上使用它之后 - anjelott1

似乎由于某些原因，它无法找到您元素的偏移量。尝试通过首先在仅包含基本要素的简单文档中尝试该代码来隔离问题。 - Joonas

使用http://lions-mark.com/jquery/scrollTo/。 - Irfan DANISH

Answer 1

更新

如果您想要一个带有菜单和链接到特定页面的菜单，请尝试这个。它将以窗帘效果滚动到您的页面。

演示 http://jsfiddle.net/yeyene/mCytP/2/

在ol外添加menu，然后在href中添加li页面id的链接即可。

<div id="menu">
    <ul>
        <li><a href="#home" class="curtain-links curtain-links-active">Home</a></li>
        <li><a href="#about_us" class="curtain-links">About Us</a></li>
        <li><a href="#portfolio" class="curtain-links">Portfolio</a></li>
        <li><a href="#programs" class="curtain-links">Programs</a></li>
     </ul>
</div>

- yeyene