Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу.
Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком решетки вначале (#). Например:
<a href="#block">Ссылка на элемент</a><div id="block"></div>
При нажатии на ссылку будет резкий переход к назначенному элементу. Чтобы прокрутка была плавной, добавляем код представленный ниже.
Подключаем библиотеку jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Код JavaScript
<script>$(function(){ $('a[href^="#"]').click(function () { elementID = $(this).attr("href"); position = $(elementID).offset().top; $('html, body').animate({scrollTop: position}, 500); return false; });}); </script>
Вот и все. Теперь при нажатии на любые ссылки содержащие якорь будет происходить плавная прокрутка к указанному в них месту на странице.
