JQuery - Как прокрутить привязку к верхней части страницы при нажатии?
У меня есть список ссылок в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>
Я нашел учебники для прокрутки до идентификатора при нажатии на ссылку (путем создания href идентификатора div, к которому вы хотите перейти - к сожалению, я не могу этого сделать, поскольку мой href на самом деле является отдельной html-страницей, даже если она используя dropcontent для загрузки на текущую страницу.
Я также нашел учебник по прокрутке до определенного идентификатора при загрузке страницы, но ни один из них, в котором просто говорится, что при щелчке привязки данного класса, прокрутите его до верхней части окна браузера.
Может кто-нибудь помочь мне с этим, пожалуйста? Благодарю.
ОБНОВИТЬ:
У меня есть свиток, работающий с использованием следующего кода:
$('.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
Оказывается, это было что-то еще, что вызывало проблему - теперь у меня это работает!