Как я могу определить, что страница перепрыгнула на якорь (#) в javascript?
У меня есть некоторый javascript, который может появляться на разных страницах. Иногда к этим страницам обращались через URL, содержащий ссылку на якорь (например, # comment-100). В этих случаях я хочу, чтобы JavaScript откладывал выполнение до тех пор, пока окно не перескочит. Прямо сейчас я просто использую задержку, но она довольно хакерская и, очевидно, работает не во всех случаях. Кажется, я не могу найти какое-либо событие DOM, которое соответствует окну «jump».
Помимо простой задержки, единственное решение, которое я придумала, состоит в том, чтобы JS искал якорь в URL и, если он найдет, следите за изменениями в scrollTop. Но это кажется глючным, и я Я не уверен на 100%, что мой скрипт всегда будет запущен до того, как произойдет прокрутка, поэтому он будет работать только в том случае, если пользователь прокручивает страницу вручную. Во всяком случае, мне не очень нравится решение, и я предпочел бы что-то более управляемое событиями. Есть предложения?
Изменить, чтобы уточнить:
Я не пытаюсь обнаружить изменение хеша. Возьмем следующий пример:
- Страница index.php содержит ссылку на post.php # comment-1
- Пользователь нажимает ссылку на post.php # comment-1
- post.php # comment-1 load
- $ (document) .ready срабатывает
- Вскоре браузер прокручивает до # comment-1
Я пытаюсь надежно определить, когда произойдет шаг 5.
2 ответа
Похоже, вы могли бы использовать window.onscroll . Я только что протестировал этот код:
<a name="end" />
<script type="text/javascript">
window.onscroll = function (e) {
alert("scrolled");
}
</script>
, который, кажется, работает.
Edit: Хм, это не работает в IE8. Однако он работает как в Firefox, так и в Chrome.
Изменить: jQuery имеет обработчик .scroll () , но он срабатывает перед прокруткой в IE и, похоже, не работает в Chrome или Firefox.
Вы можете проверить window.onhashchange в современных браузерах. Если вам нужна кросс-совместимость, загляните на http://benalman.com/projects/jquery-hashchange-plugin/
. На этой странице также есть дополнительная информация о window.onhashchange.
РЕДАКТИРОВАТЬ: вы в основном заменяете все имена привязок аналогичным соглашением о связывании, а затем используете .scrollTo для обработки прокрутки:
$(document).ready(function () {
// replace # with #_ in all links containing #
$('a[href*=#]').each(function () {
$(this).attr('href', $(this).attr('href').replace('#', '#_'));
});
// scrollTo if #_ found
hashname = window.location.hash.replace('#_', '');
// find element to scroll to (<a name=""> or anything with particular id)
elem = $('a[name="' + hashname + '"],#' + hashname);
if(elem) {
$(document).scrollTo(elem, 800,{onAfter:function(){
//put after scroll code here }});
}
});
См. jQuery: прокрутите до привязки при вызове URL, замените поведение браузеров для больше информации.