我在 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 的教程,但没有一个教程简单地说当单击给定类的 anchor 时,将其滚动到浏览器窗口的顶部。
有人可以帮我解决这个问题吗?谢谢。
更新:
我使用以下代码使滚动正常工作:
$('.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
原来是其他原因导致了问题 - 我现在可以正常工作了!
最佳答案
以下是将链接滚动到顶部的方法:
$('.work a').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
});
关于jQuery - 单击时如何将 anchor 滚动到页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8355673/