Доброго времени суток, уважаемые пользователи! Сегодня хочу поделиться с Вами своим опытом и научить вас автоматически перематывать страницу к нужным элементам при клике по нужной кнопке, картинке и т.д. Этот метод я активно применил в новом дизайне, дабы немого упростить пребывание на сайте всех пользователей без исключения
Чуть позже я выложу скрипт со стрелочками вверх, вниз с плавным скроллингом, основанный на этом методе
Итак, приступим:
Пример # 1: Прокручиваем страницу вверх
|
|
<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: Прокручиваем страницу к нужному блоку (Якорю)
|
|
<div id="commform" style="width:0px;height:0px;opacity:0;">com</div> <a onclick="scrolltop2()">Прокрутить к форме комментариев</a> <script> function scrolltop2() { $('body').scrollTo( { top:$('#commform').offset().top, left:0}, 500); } </script> |
Отличие от предыдущего скрипта лишь в том, что мы указываем конкретный якорь, к которому будем пролистывать страницу:
top:$('#commform')
Все остальные параметры не меняем (Исключая скорость - с ней вы можете поэкспериментировать)
Ну вот и всё, как видите, нет ничего сложного. Будут вопросы - задавайте в комментариях
Автор публикации
27
Комментарии: 47Публикации: 59Регистрация: 13-06-2015
