Приветствую вас читатели моего блога. Сегодня мы поговорим о таком интересном эффекта как плавная прокрутка страницы до определённого места.
В качестве ДЕМО вы можете посмотреть работу нижестоящего блока.
Навигация по статье:
Что нам для этого понадобится?
Для того чтобы сделать плавной прокрутку до любого места на странице сайта нам понадобится:
- 1.Подключить библиотеку Jquery
- 2.Расставить якоря в тех местах до которых будет плавно прокручиваться страница сайта
- 3.Расставить ссылки, по нажатии на которые будет осуществляться плавная прокрутка.
- 4.Прописать специальный скрипт.
- 5.Проверить работу.
Как правильно подключить Jquery?
Если ваш сайт работает на каком то движке, то вполне вероятно что библиотека Jquery уже подключена и подключать её повторно не нужно.
Если подключить эту библиотеку 2 раза то она может вообще не работать.
Если же вы уверены что библиотека у вас не подключалась, то вам необходимо прописать перед тегом </head> следующую строку
Для удалённого подключения:
|
1 |
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> |
При этом типе подключения библиотека будет подгружаться с сайта code.jquery.com и будет взята последняя версия.
Для локального подключения вам нужно будет либо скачать файл jquery по этой ссылке Скачать Jquery
Либо перейти по адресу code.jquery.com/jquery-latest.js
И сохранить этот код в файл с расширением .js
Для этого в своём браузере нам нужно выбрать в меню «Сохранить как» и убедиться, что в поле тип файла выбран JScript.
При этом для разных браузеров сама формулировка в поле «Тип файла» может немного отличаться, но главное чтобы там присутствовало «JScript»
Затем вам нужно будет загрузить этот файл на ваш хостинг в папку «js» и при подключении библиотеки указать ссылку на него.
В моём случае это выглядит так:
|
1 2 |
<script src=" //impuls-web.ru/wp-content/themes/impulsweb/js/jquery-latest.js " type="text/javascript"></script> |
Для того чтобы убедиться что вы правильно прописали путь к файлу попробуйте ввести в браузере ссылку на него. Если всё верно, то у вас должно отобразиться содержимое файла.
Как создать якорь?
Существует два способа задать якорь:
- Через атрибут ID
Например:
1<div id ="p1">Ваш контент</div> - Через атрибут name
Например:
1<h1 name ="p2">Ваш текст</h1>
Я обычно использую первый вариант, хотя большой разницы в данном случае нет.
Как настроить плавную прокрутку страницы?
Для того чтобы наша плавная прокрутка до якоря сработала нам нужно расставить ссылки на якоря.
|
1 |
<a class="scrollto" href="#p1">Плавная прокрутка к якорю</a> |
Обратите внимание, что у ссылки обязательно должен присутствовать атрибут class=»scrollto»
И она должна ссылаться на определённый якорь. В моём случае якорь имеет ID=»p1″
Поэтому в ссылке будет указано href=»#p1″. Если вы указывали якорь через name, то ссылка будет выглядеть точно так же
|
1 |
<a class="scrollto" href="#p2"> Плавная прокрутка </a> |
Теперь, когда ссылки и якоря готовы, в конце страницы перед тегом </body> подключаем скрипт:
|
1 2 3 4 5 6 7 8 9 10 |
<script> jQuery(document).ready(function() { jQuery("a.scrollto").click(function () { elementClick = jQuery(this).attr("href") destination = jQuery(elementClick).offset().top; jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100); return false; }); }); </script> |
При этом вы можете регулировать скорость анимации перехода.
Прокрутка до якоря с отступом сверху
Очень часто возникают ситуации, когда при прокрутке к якорю верхняя часть блока перекрывается, к примеру,плавающим фиксированным меню или ещё каким то элементом и нужно сделать небольшой отступ сверху.
Для этого мы можем добавить в этот же скрипт значение отступа сверху.
Весь скрипт в этом случае будет выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 |
<script> jQuery(document).ready(function() { jQuery(".scrollto a").click(function () { elementClick = jQuery(this).attr("href") destination = jQuery(elementClick).offset().top - 100; jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100); return false; }); }); </script> |
Какие могут быть нюансы в настройке?
Если после всех проделанных настроек у вас не работает плавная прокрутка страницы, то вам нужно сделать следующее.
- Проверить правильность написания заданных якорей и ссылок. Чтобы у них присутствовали все необходимые атрибуты.
- Попробовать подключить другую версию библиотеки Jquery.
Пошаговая видео инструкция
Если у вас остались какие то вопросы — посмотрите это видео:
По всем вопросам, возникшим в процессе реализации данной задачи, пишите в комментарии.
Если эта статья была для вас полезной, то не забудьте нажать на одну из кнопок социальных сетей!
Желаю вам благополучного создания плавной прокрутки!
До встречи в моих новых статьях.
С уважением Юлия Гусарь
Это очень ценное мнение
а может подскажете как сделать отступ от якоря, а то у меня при прокрутке меню наезжает на сам якорь
На следующей неделе постараюсь статью по этой теме сделать. Там нужно скрипт дописать.
Юлия, добрый вечер! Ждем ваш обещанный скрипт. Очень нужно!
Здравствуйте! Добавила пункт «Прокрутка до якоря с отступом сверху» к этой же статье. Попробуйте такой вариант.
Жаль, что сейчас не могу высказаться — вынужден уйти. Но освобожусь — обязательно напишу что я думаю.
——
Юлия, доброго времени суток! Вы обещали поделится скриптом для точного скрола.
Здравствуйте! Добавила пункт «Прокрутка до якоря с отступом сверху» к этой же статье.