Поделюсь отличным примером, как сделать плавную прокрутку до всех якорей на сайте с помощью скрипта и jQuery.
Начнем с того, что существует много вариантов реализации плавной прокрутки до якоря на сайте. Но не все они подходящие, по крайней мере, для меня. Некоторые имеют возможность плавно прокручиваться только до одного якоря на странице сайта, а другие очень сложные и имеют большое количество кода.
В этом примере используется минимальное количество кода и будут работать все якоря на странице сайта. Безусловно, чаще всего плавная прокрутка используется на одностраничных сайтах, чтобы украсить ее.
Итак, что нужно сделать?! Всё просто!
1. Подключаем скрипт с jQuery в конце страницы перед закрывающимся тегом </body> Это позволит избежать возможных конфликтов с уже имеющимися скриптами jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
2. Сразу после подключения jQuery добавляем код скрипта, который позволит нам плавно перемещаться к якорям на сайте:
<script> $(document).ready(function(){ $("a[href*=#]").on("click", function(e){ var anchor = $(this); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 777); e.preventDefault(); return false; }); }); </script>
3. Теперь меню с ссылками на якоря. Вид у него примерно такой:
<ul> <li><a href="#main">Главная</a></li> <li><a href="#about">О компании</a></li> <li><a href="#price">Прайс-лист</a></li> <li><a href="#contacts">Контакты</a></li> </ul>
Ссылки на якоря указываются с символом # обязательно!
4. Плавный переход будет осуществляться к блоку, у которого id соответствует ссылке в меню, например:
<section id="price"> <p>Тут информация о ценах и прайс-лист</p> </section>
Вот и всё! При нажатии на кнопку (ссылку) "Прайс-лист" начнется прокрутка к блоку id="price" с информацией о ценах.
Демонстрацию работы смотрите по ссылке.
Рабочий исходник скачать по этой ссылке.
Всем удачи и добра!


Последнее от Макс Пуля
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры
- Сервер, проекты и ffmpeg
- Семантическое ядро сайта
- Хостинг на домашнем сервере Open Server, DDNS и динамический IP-адрес
4 комментарии
-
Комментировать
Понедельник, 18 Февраль 2019 22:23 написал Альберт
('a[href*="#"]') Вместо ("a[href*=#]"), без этого не работает.
-
Комментировать
Среда, 12 Декабрь 2018 14:57 написал Алексей
Всё просто и понятно. Спасибо.
-
Комментировать
Четверг, 02 Август 2018 15:25 написал Сергей
А копировать код, КАК? РУКАМИ ПИСАТЬ ЧТО ЛИ?