-->

Прокрутить страницу при загрузки до якоря | JavaScript

Давно хотел поставить некий скрипт, чтобы пользователь во время загрузки странички видел не начало года, а попадал сразу на текущий день, чтобы страница сразу проматывалась к id.

Январь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Февраль

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Март

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Апрель

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Май

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Июнь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Июль

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Август

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Сентябрь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Октябрь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Ноябрь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Декабрь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
<script>
window.addEventListener('DOMContentLoaded', function() {
  if(location.href.indexOf('#')== -1) {  // если в URL нет хэша
    var mes = document.querySelectorAll('section.mes');
    mes[new Date().getMonth()].className = 'mes raz';  // добавить класс для текущего месяца
    location.hash = "#mes"+new Date().getMonth()+('0' + new Date().getDate()).slice(-2);
  }
}, false);
</script>

<style>
.mes.raz {  /* стиль текущего месяца */ 
  outline: 1em solid #f9f9f9;
  background: #f9f9f9;
}
</style>

<section class="mes">
  <h4>Январь</h4>
  <p><strong id="mes001">1</strong>
  <p><strong id="mes002">2</strong>
  <p><strong id="mes003">3</strong>
  <p><strong id="mes004">4</strong>
  <!-- и т.д. и т.п. -->
  <p><strong id="mes011">11</strong>
  <p><strong id="mes012">12</strong>
  <!-- и т.д. и т.п. -->
  <p><strong id="mes031">31</strong>
</section>
<section class="mes">
  <h4>Февраль</h4>
  <p><strong id="mes101">1</strong>
  <p><strong id="mes102">2</strong>
  <p><strong id="mes103">3</strong>
  <p><strong id="mes104">4</strong>
  <!-- и т.д. и т.п. -->
  <p><strong id="mes129">29</strong>
</section>
<section class="mes">
  <h4>Март</h4>
</section>
<section class="mes">
  <h4>Апрель</h4>
</section>
<section class="mes">
  <h4>Май</h4>
</section>
<section class="mes">
  <h4>Июнь</h4>
</section>
<section class="mes">
  <h4>Июль</h4>
</section>
<section class="mes">
  <h4>Август</h4>
</section>
<section class="mes">
  <h4>Сентябрь</h4>
</section>
<section class="mes">
  <h4>Октябрь</h4>
</section>
<section class="mes">
  <h4>Ноябрь</h4>
</section>
<section class="mes">
  <h4>Декабрь</h4>
  <h4>Январь</h4>
  <p><strong id="mes1101">1</strong>
  <p><strong id="mes1102">2</strong>
  <p><strong id="mes1103">3</strong>
  <p><strong id="mes1104">4</strong>
  <!-- и т.д. и т.п. -->
  <p><strong id="mes1131">31</strong>
</section>
в f t
наверх ↑

4 комментария:

Анонимный
Подскажите по 4 примеру как сделать если над блоком есть еще плавающее горизонтальное меню, чтобы блок отталкивался не от верха экрана а и учитывало div высоту меню

Спасмибо.
NMitra
P = 0 замените на P = 300
Unknown
просто меню адаптивное и при 768px оно стает в два ряда и отступ через Р получается неравномерным, а можно учесть именно высоту div? к примеру var menuh = $(".menu").height();
NMitra
P = document.querySelector('#menu').offsetHeight

Отправить комментарий