Четверг, 26 Июль 2018 13:08

Плавная прокрутка к якорю - Скрипт и jQuery

Автор

Оцените материал
(108 голосов)
Плавная прокрутка к якорю - Скрипт и jQuery Плавная прокрутка к якорю - Скрипт и jQuery

Поделюсь отличным примером, как сделать плавную прокрутку до всех якорей на сайте с помощью скрипта и 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" с информацией о ценах.

Демонстрацию работы смотрите по ссылке.

Рабочий исходник скачать по этой ссылке.

Всем удачи и добра!

Прочитано 604 раз

Поделитесь с друзьями этой статьей!

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.

epicblog.net

2 комментарии

Оставить комментарий