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 ，但没有一个简单地说当一个给定类的锚点被点击时，将它滚动到浏览器窗口的顶部。

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

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") 
} 

}); 

所以现在我只需要这些代码2位整合，让他们一起工作......到目前为止，还没有我有没有运气这样做 - 如果我添加滚动（动画）功能，负载功能停止工作......

更新2

原来这是别的东西这是造成问题的原因 - 我现在有工作！

Answer 1

这里是你如何滚动链接到顶端：

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

Answer 2

不是您的问题的直接答案，而是您可能想要使用的很好的参考。

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

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

Answer 3

这个回答下面链接是密切相关的，良好的信息为喜欢能够

• 滚动所有的人的问题该页面为某个元素，div id

• 让该元素通过点击该元素的 锚点滚动到页面的顶部

• 让该元素通过点击包含所有锚链接的 实际div id滚动到页面的顶部; “点击捕手格”

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id