| Главная » Файлы » Прочие скрипты » jQuery |
Учимся скроллить страницу к нужным элементам сайта на jQuery by Apocalypse для uCoz
| 24.06.14, 08:33:00 | |
 Доброго времени суток, уважаемые пользователи! Сегодня хочу поделиться с Вами своим опытом и научить вас автоматически перематывать страницу к нужным элементам при клике по нужной кнопке, картинке и т.д. Этот метод я активно применил в новом дизайне, дабы немого упростить пребывание на сайте всех пользователей без исключения Чуть позже я выложу скрипт со стрелочками вверх, вниз с плавным скроллингом, основанный на этом методе Итак, приступим: Пример 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: скроллим страницу к нужному блоку (Якорю) Допустим, есть у нас где то в главном меню ссылка, при клике на которую нам нужно прокрутить страницу до формы добавления комментариев Для начала нам нужно установить так называемый якорь, к которому нужно будет прокручивать страницу. Делается это очень просто: Над тем блоком, участком кода, таблицей, формой и т.д. нам нужно просто вставить див с нужным id и любым содержимым (Див не должен быть пустыми или же быть скрыты стилем display:none;) Код <div id="commform" style="width:0px;height:0px;opacity:0;">com</div> Мы специально стилизовали див так, чтобы его не было видно на сайте, задав ему высоту, ширину и прозрачность = 0; Далее сама ссылка со скриптом Код <a onclick="scrolltop2()">Прокрутить к форме комментариев</a> <script> function scrolltop2() { $('body').scrollTo( { top:$('#commform').offset().top, left:0}, 500); } </script> Отличие от предыдущего скрипта лишь в том, что мы указываем конкретный якорь, к которому будем пролистывать страницу: top:$('#commform') Все остальные параметры не меняем (Исключая скорость - с ней вы можете поэкспериментировать) Ну вот и всё, как видите, нет ничего сложного. Будут вопросы - задавайте в комментариях Урок подготовлен Apocalypse | |
| Просмотров: 504 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |