锚点标签，如何使用jQuery跳转到一个带有div类的开头

Question

我希望实现全局锚点功能。

我想通过将链接添加到我的header.inc文件中来全局包含网页的主要部分。

当您选择该链接时，它将滚动到页面的主要部分，该部分位于div类content-body内。

<div class="content-body">
  main content
</div>

因此它会滚动到div开始的位置。

我想实现锚点标签的功能，但它会跳转到一个div类，而不是id。

我想知道是否有一种使用jQuery实现这个的方法。我为什么想要这样做，是因为我可以在整个现有网站中全局实现这个功能。

- Brad

---

你想在所有页面中包含jQuery插件，还是只使用纯jQuery实现？ - Sean Vieira

Answer 1

这可能会对您有所帮助。

您可以创建一个小的函数来实现此行为。这真的非常有用。您无法完全避免打开窗口或模态框等事情。

 function to_position(divid){
     $('html, body').animate({scrollTop:$(divid).position().top - 50 }, 'slow');
 }

所以，您可以像这样使用该函数。

 to_position('#my_id')
 //or class, or whatever jquery selector
 to_position('.my_class')
 //
 to_position('input[name="lorenzolamas"]')

- Pjl

Answer 2

传统上，这是通过在元素上使用id属性并使锚点指向该id来完成的。

<a href="#main">Go to Main Element</a>

<div id="main"></div>

哈希标签是关键，因为它表示您想要将用户引导到同一文档中的某个位置。

当然，这是在假设您并不是说所涉及的“main”元素附加的类是您唯一的选择时。

- slant

---

我正在寻找一种使用jQuery的方法来实现这个，因为整个网站已经使用div class="content-body"了。 - Brad

抱歉，我在你说之后才注意到jquery标签。我发现按类滚动到元素的唯一方法是使用ScrollTo插件（http://plugins.jquery.com/project/ScrollTo）。 - slant

看起来你只需要做以下操作：$('link-to-body-content').click(function(){ $.scrollTo('.content-body'); }); - slant

抱歉，格式不太好。我没意识到它无法翻译。希望这有意义。 - slant

Answer 3

你可以在jQuery中使用scrollTop。这里有一个page展示了这个功能。

- Buggabill