Плавная прокрутка по клику на ссылку Jquery

Приветствую, друзья, на страницах 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. Самый простой способ добавить гамбургер иконку