Прокрутка к якорю из URL страницы при загрузке

Рейтинг: 0Ответов: 2Опубликовано: 24.03.2015

Добрый день, коллеги! Нужна помощь, хочу реализовать следующий эффект: при загрузке страницы если в адресе сайта будет находиться якорь (например, mysite.ru#anchor), тогда прокрутить страницу до этого якоря!

Использую скрипт прокрутки до якоря:

$(window).load(function () {
      $('html, body').animate({scrollTop: $('#anchor').offset().top}, 2000);
      return false;});

Он нормально работает, если явно прописывать в него конкретный якорь #anchor, но если прописать этот якорь еще и в адресе mysite.ru#anchor, то после обновления - страница сразу опускается до якоря без анимации (как в обычном режиме), а скрипт начинает выполняться потом (когда страница уже прокручена), т.е. после инициализации элемента с id = "anchor" в DOM, браузер срабатывает раньше, чем скрипт.

Вопрос: как сделать так, чтобы было наоборот, или вообще как добиться желаемого?

javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Если запускать функцию после загрузки содержимого, то вполне логично, что у вас будет срабатывать дефолтный переход к якорю в html, а после прогрузки всего html будет срабатывать скрипт. Поэтому вам нужно как-то запретить переход к якорю по дефолту. @TheDoctor правильно написал, что нужно копать в сторону window.location.hash.

Например, если сильно не заморачиваться, можно использовать такой вариант:

<script>
  window.hashName = window.location.hash;
  window.location.hash = '';

  $(window).load(function () {
      $('html, body').animate({scrollTop: $(window.hashName).offset().top}, 2000);
      return false;});
   });

</script>

Первая часть скрипта соотвественно должна быть вызвана до загрузки html.

▲ 0

А какой глюк выходит?
Можно проверять window.location.hash на наличие там прокручиваемого тэга. Если есть - ничего не крутим и не анимируем, т.к. браузер сам установит прокрутку.
Ман.