jQuery - Como rolar uma âncora para o topo da página quando clicada?
Tenho uma lista de links emdiv
elements e estou usando o dropcontent.js para carregar o conteúdo em outrodiv
quando um link é clicado. Agora, gostaria de adicionar um código que role o link clicado até a parte superior da janela do navegado
HTML é assim para cada item da lista:
<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>
Encontrei tutoriais para rolar para um ID quando um link é clicado (tornando o href o ID da div que você deseja rolar - infelizmente não posso fazer isso, pois meu href é na verdade uma página html separada, embora está usando o dropcontent para carregá-lo na página atual.
Também encontrei um tutorial para rolar para um ID específico no carregamento da página, mas nenhum que simplesmente diga que quando uma âncora de uma determinada classe é clicada, role-a até a parte superior da janela do navegado
Alguém pode me ajudar com este, por favor? obrigado
ATUALIZAR
Eu tenho o pergaminho funcionando usando o seguinte código:
$('.work a').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
});
No entanto, meu dropcontent.js não está mais funcionando ... Acho que porque tenho 2 funções ocorrendo no mesmo clique ... Gostaria que o conteúdo fosse carregado primeiro e depois rol
aqui está meu 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")
}
});
Então agora eu só preciso integrar esses 2 bits de código para fazê-los funcionar juntos ... até agora não tive sorte em fazer isso - se eu adicionar a função scroll (animar), a função load parará de funcionar ...
UPDATE 2
Acontece que havia outra coisa que estava causando o problema - agora estou funcionando!