Как я могу сказать, если страница перешла на якорь (#) в JavaScript?

Question

У меня есть некоторый JavaScript, который может появляться на разных страницах.Иногда к этим страницам обращались через URL, содержащий ссылку на якорь (например, # comment-100).В этих случаях я хочу, чтобы JavaScript откладывал выполнение до тех пор, пока окно не перескочит.Прямо сейчас я просто использую задержку, но она довольно хакерская и, очевидно, работает не во всех случаях.Кажется, я не могу найти какое-либо событие DOM, которое соответствует окну «jump».

Помимо простой задержки, единственное решение, которое я придумала, состоит в том, чтобы JS искалзакрепите URL-адрес и, если он найдет его, наблюдайте за изменениями в scrollTop.Но это кажется ошибочным, и я не уверен на 100%, что мой сценарий всегда будет запускаться до прокрутки, поэтому он будет запускаться только в том случае, если пользователь прокрутит страницу вручную.Во всяком случае, мне не очень нравится решение, и я предпочел бы что-то более управляемое событиями.Есть предложения?

Изменить, чтобы уточнить:

Я не пытаюсь обнаружить изменение хеша.Возьмем следующий пример:

1. Страница index.php содержит ссылку на post.php # comment-1
2. Пользователь нажимает ссылку на post.php # comment-1
3. post.php # comment-1 загружает
4. $ (документ) .ready срабатывает
5. Вскоре браузер прокручивает до # comment-1

Я пытаюсь точно определить, когда происходит шаг 5.

Answer 1

Вы можете проверить 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, замените поведение браузера для получения дополнительной информации.

Answer 2

Похоже, вы могли бы использовать window.onscroll.Я только что протестировал этот код:

<a name="end" />
<script type="text/javascript">
    window.onscroll = function (e) {
        alert("scrolled");
}
</script>

, который, кажется, работает.

Редактировать: Хм, он не работает в IE8.Он работает как в Firefox, так и в Chrome.

Редактировать: jQuery имеет обработчик .scroll(), но он запускается перед прокруткой в ​​IE и, похоже, не работает для Chrome или Firefox.

Answer 3

Чтобы определить, когда элемент появляется на экране, используйте плагин emerge :

$('#comment-1').appear(function() {
  $(this).text('scrolled');
});