jQuery - 单击时如何将锚点滚动到页面顶部？

我有一个链接列表divelements，我正在使用 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 的教程，但没有一个教程简单地说当单击给定类的锚点时，将其滚动到浏览器窗口的顶部。

有人可以帮我解决这个问题吗？谢谢。

UPDATE:

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

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

但是，我的 dropcontent.js 不再工作...我想是因为我在同一次单击上发生了 2 个功能...我希望先加载内容，然后滚动。

这是我的 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")
}

});

所以现在我只需要集成这两位代码以使它们一起工作...到目前为止，我没有运气这样做 - 如果我添加滚动（动画）函数，加载函数将停止工作...

UPDATE 2

原来是其他原因导致了问题 - 我现在可以正常工作了！

以下是将链接滚动到顶部的方法：

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