Этот скрипт в большей степени подойдет для одностраничных сайтов — лендингов. Он позволяет плавно прокручивать страницу к нужному блоку, заголовку или вообще любому элементу в пределах текущей страницы.
Плавная прокрутка гораздо лучше воспринимается пользователями, чем резкий рывок и смена информации на экране, поэтому такой скрипт является просто неотъемлемой частью сайта, где используется вертикальное перемещение в пределах одной страницы.
Установка
На нужных страницах или в одном из глобальных блоков установите следующий код так, чтобы он располагался перед закрывающим тегом body:
Код
<script>
(function($){ $(document).on('click', 'a[href^=#]', function () { $('html, body').animate({ scrollTop: $('[name="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); return false; }); })(jQuery);
</script>
Элемент, к которому будет осуществляться скроллинг, должен иметь атрибут name
со значением имени блока (произвольное), например:
Код
<h2 class="clients-b" name="clients">Клиенты</h2>
Ссылка, которая будет осуществлять скроллинг, должна иметь следующее значение атрибута href
:
Код
<a href="#clients">Клиенты</a>
Таким образом можно установить любое количество ссылок с плавным скроллингом к элементам. Кнопка ниже покажет живой пример работы скрипта 