jQuery - 点击锚点如何使其滚动到页面顶部？

Question

我有一个包含链接的列表，这些链接在 div 元素中，并且我正在使用 dropcontent.js 在单击链接时将内容加载到另一个 div 中。现在我想添加一些代码，使得被点击的链接滚动到浏览器窗口的顶部。

每个列表项的 HTML 如下：

<div class="work">
    <h3><a class="scroll" href="project2.html">Project 2</a></h3>
    <div class="projectIntro">
        <p>This is some intro text for project 2</p>
    </div>
    <div class="pictures"></div>
</div>

我找到了有关单击链接时滚动到ID的教程（通过将href设置为要滚动到的div的ID-不幸的是，我不能这样做，因为我的href实际上是一个单独的html页面，即使它使用dropcontent将其加载到当前页面中。

我还找到了一个在页面加载时滚动到特定ID的教程，但没有一个简单地说当给定类别的锚点被单击时，将其滚动到浏览器窗口的顶部。

请问有人能帮我解决这个问题吗？谢谢。

更新：

我已经使用以下代码使滚动工作：

$('.work a').click(function() {
         $('html,body').animate({scrollTop: $(this).offset().top}, 500);
         }); 

然而，我的dropcontent.js不再起作用...我认为是因为我在同一次点击中有两个函数发生...我希望内容先加载，然后再滚动。

这是我的dropcontent.js

$('.work a').click(function(event) {
event.preventDefault();

var parent = $(this).parents(".work");
var content_holder = parent.children(".pictures");

if (parent.hasClass("selected_work")) {
  close_other();
  return;
}

close_other();

parent.addClass("selected_work");
content_holder.load(this + " #content .work");

$('.selected_work img').attr("src", "images/arrow_close.gif");

});


function close_other() {

var selected_work = $('.selected_work');

selected_work.children('.pictures').empty();    
$('.selected_work img').attr("src", "images/arrow_open.gif");
selected_work.removeClass("selected_work")
}

});

现在我只需要将这两个代码片段集成起来，使它们一起工作... 到目前为止，我还没有成功做到这一点——如果我添加滚动（动画）功能，加载函数就会停止工作...

更新2

结果发现是其他原因导致了问题——现在我已经解决了！

- Spirit

---

你能不能将animate调用移到close_other之后的return处？这样做不会产生相同的效果吗？ - dash

@Spirit，如果您已经找到了自己的答案，请在下方发布一个答案并接受它。这将关闭问题并使其他人在未来能够找到它。 - Marnix

当然 - 我之前尝试过回答自己的问题，但是系统不允许我这么快就回答。我现在已经发布了答案，但是系统告诉我必须等待2天才能接受它。 - Spirit

Answer 1

这里是如何将链接滚动到页面顶部的方法：

$('.work a').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
}); 

- Spirit

Answer 2

这个问题的答案与以下链接密切相关，对于所有喜欢能够：

• 滚动页面到特定元素，div id

• 通过从该元素单击锚点，使该元素滚动到页面顶部

• 通过单击包含所有锚点链接的实际div id，“click catcher div”，使该元素滚动到页面顶部

单击元素内或包含div id中的任何位置的锚点，将元素滚动到页面顶部

- moderntimes

Answer 3

并非直接回答你的问题，但这是一个很好的参考资料，你可能会想要使用它。

http://demos.flesler.com/jquery/scrollTo/

jQuery scrollTo 插件可让您滚动到页面中的任何锚点 <a>。如果您只是在窗口顶部放置一个锚点，则可以使用 scrollTo 直接进行带动画效果的跳转。

- Marnix

---

谢谢 - 我确实看过这个，但我不确定它是否完全符合我的要求，因为我不是想滚动到不同的锚点...我想要刚刚点击的锚点滚动 - 我已经弄清楚了如何做到这一点...只是在让两个代码片段同时工作时遇到了问题，而不是互相抵消... - Spirit