jQuery-单击时如何将锚点滚动到页面顶部? [英] jQuery - How to scroll an anchor to the top of the page when clicked?
问题描述
我在div
元素中有一个链接列表,单击链接时,我正在使用dropcontent.js将内容加载到另一个div
中.我现在想添加一些代码,将单击的链接滚动到浏览器窗口的顶部.
I have a list of links in div
elements and I am using dropcontent.js to load content into another div
when a link is clicked. I would now like to add some code which scrolls the clicked link to the top of the browser window.
列表中的每个项目的HTML都是这样的:
HTML is like this for each item in the list:
<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将其加载到当前页面中.
I have found tutorials for scrolling to an ID when a link is clicked (by making the href the ID of the div you want to scroll to - unfortunately I can't do this as my href is actually a separate html page even though it is using dropcontent to load it into the current page.
我还找到了一个用于在页面加载时滚动到特定ID的教程,但是没有一个简单地说明当单击给定类的锚点时,将其滚动到浏览器窗口顶部的情况.
I also found a tutorial for scrolling to a particular ID on page load, but none that simply say when an anchor of a given class is clicked, scroll it to the top of the browser window.
有人可以帮我解决这个问题吗?谢谢.
Can someone help me out with this one please? thanks.
更新:
我使用以下代码使滚动工作正常:
I have got the scroll working using the following code:
$('.work a').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
});
但是,我的dropcontent.js不再起作用...我想是因为我在同一单击上发生了2个函数...我希望先加载内容,然后滚动.
However, my dropcontent.js is no longer working... I think because I have 2 functions occuring on the same click... I would like the content to load first, then scroll.
这是我的dropcontent.js
here is my 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位代码即可使它们一起工作...到目前为止,我还没有走运-如果我添加了scroll(动画)函数,则load函数将停止工作. ..
So now I just need to integrate these 2 bits of code to get them working together... so far no I have had no luck doing this - if I add the scroll (animate) function, the load function stops working...
更新2
原来是导致问题的其他原因-我现在可以正常工作了!
Turns out it was something else which was causing the problem - I now have it working!
推荐答案
以下是将链接滚动到顶部的方法:
Here is how you scroll the link to the top:
$('.work a').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
});
这篇关于jQuery-单击时如何将锚点滚动到页面顶部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!