Блог

Доброго времени суток, уважаемые пользователи! Сегодня хочу поделиться с Вами своим опытом и научить вас автоматически перематывать страницу к нужным элементам при клике по нужной кнопке, картинке и т.д. Этот метод я активно применил в новом дизайне, дабы немого упростить пребывание на сайте всех пользователей без исключения

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

Итак, приступим:

Пример 1: Скроллим страницу вверх

Code

<a onclick="scrolltop()">Прокрутить наверх</a>
  <script>
  function scrolltop() {
  $('body').scrollTo( { top:$('body').offset().top, left:0}, 500);
  }
  </script>

Давайте разберёмся с параметрами:

onclick="scrolltop()" - при клике выполняется функция scrolltop
$('body').scrollTo - всю страницу прокручиваем до...
top:$('body').offset().top, left:0 - до самого верха страницы со сдвигом влево на 0px
500 - прокручиваем за 500 миллисекунд (Пол секунды)

Пример 2: скроллим страницу к нужному блоку (Якорю)

Допустим, есть у нас где то в главном меню ссылка, при клике на которую нам нужно прокрутить страницу до формы добавления комментариев

Для начала нам нужно установить так называемый якорь, к которому нужно будет прокручивать страницу. Делается это очень просто:

Над тем блоком, участком кода, таблицей, формой и т.д. нам нужно просто вставить див с нужным id и любым содержимым (Див не должен быть пустыми или же быть скрыты стилем display:none;)

Code

Мы специально стилизовали див так, чтобы его не было видно на сайте, задав ему высоту, ширину и прозрачность = 0;

Далее сама ссылка со скриптом

Code

<a onclick="scrolltop2()">Прокрутить к форме комментариев</a>
  <script>
  function scrolltop2() {
  $('body').scrollTo( { top:$('#commform').offset().top, left:0}, 500);
  }
  </script>

Отличие от предыдущего скрипта лишь в том, что мы указываем конкретный якорь, к которому будем пролистывать страницу:

top:$('#commform')

Все остальные параметры не меняем (Исключая скорость - с ней вы можете поэкспериментировать)

Ну вот и всё, как видите, нет ничего сложного. Будут вопросы - задавайте в комментариях

Урок подготовлен Apocalypse