Приветствую, друзья, на страницах WebDevTips. Сегодня практических на всех лендингах вы сможете увидеть плавный скролл по клику к элементу. Это здорово помогает клиенту ориентироваться на сайте. Ведь удобно просто кликнуть по ссылке в меню, и сразу проскролить к выбранному элементу. Так же, плавная прокрутка к якорю служит элементом wow-дизайна для сайта. Как видите, плавная прокрутка не только красиво выглядит, но и помогает пользователям сайта. Давайте приступим к написанию.
Пример на Codepen.io
Для начала подготовим само меню
<ul class="menu">
<li><a href="#home">Главная</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#about">О компании</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>Я сделал меню чисто для примера за несколько минут. Вам же нужно будет или скопировать его, и заменить в href id на ваши, или адаптировать даное меню под ваш сайт. Главным тут будет создать ссылки — а, и прописать в href id тех элементов, к которым вы и будете делать плавную прокрутку.
Далее подключаем jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>Я подключил с помощью CDN. Можете просто скопировать эту строчку и вставить в ваш файл.
Сам код для плавной прокрутки к якорю
$(document).ready(function(){
$('.menu li a').click(function () { // 1
elementClick = $(this).attr('href');
destination = $(elementClick).offset().top;
$('body,html').animate({scrollTop: destination }, 1400);
});
});1 — В этой строке просто указываем, при клике на какие ссылки будет происходить плавный скролл. У меня путь выглядит так: class=»menu» > li > a. Можете адаптировать данную строку под вашу вложенность.
1400 — это время самой прокрутки. Можете изменить данное число для ускорения или замедления анимации.
На этом все, сейчас прокрутка работает. Я так сделал для вас пример на Codepen.io. Вы можете сами зайти, и протестировать код. Так же, вы можете немного изменить его и поэкспериментировать с написанием.
Спасибо, что прочитали. Если у вас есть вопросы, смело задавайте их в комментариях. Постараюсь ответить так быстро, как смогу. Буду очень благодарен, если вы подпишитесь на мои Telegram и YouTube каналы.
Так же, предлагаю ознакомится с моими прошлыми статьями:
1. Параллакс эффект для фона сайта на чистом CSS
2. Самый простой способ добавить гамбургер иконку
