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

Зачем нужна плавная прокрутка страницы на сайте? Все мы знаем, что при клик на ссылку можно не только переходить на другие страницы, но и перемещаться по самой странице, по якарям. Кто не знает, напомню) Делается это так:

1. Создаем блок на странице к которому хотим переместиться и присваиваем ему id. Например будет блок с id = block-1
2. Создаем ссылку на этой странице со следующим адресом <a href="#block-1">Ссылка на блок-1</a>

При клике на такую ссылку мы переместимся на нужный нам блок, но переход будет резкий, как будто открылась новая страница. Такой вариант имеет место быть, но хочется плавной прокрутки на странице. В этом нам поможет javascript.

Чтобы сделать плавный скролл на jQuery не нужно устанавливать дополнительных плагинов, тем самым излишне нагружая сайт. Мы воспользуемся всего несколькими строчками для получения нужного эффекта.

И так немного кода javascript для скролла:

$(document).ready(function() {
   $('a[href^="#"]').click(function () { 
     linkHref = $(this).attr("href");
     blockTop = $(linkHref).offset().top;
     if($.browser.safari){
       $('body').animate( { scrollTop: blockTop }, 1200 );
     }else{
       $('html').animate( { scrollTop: blockTop }, 1200 );
     }
     return false;
   });
 });

Этот код лучше поставить внизу страницы перед закрывающим тегом body, предварительно завернув в тег <script>. И вуаля! На сайте появилась плавная прокрутка страницы до якоря. Теперь пользователь плавно перемещается по длинным страничкам и лендингам.

Такой код будет работать на всем сайте и вместо резкого перехода везде будет плавная прокрутка к якорю страницы.

Часто вебмастера спрашивают как сделать плавную прокрутку на CSS, но увы это невозможно. Без яваскрипт тут не обойтись. Выше код написан на  jQuery, поэтому следует убедиться что у вас подключена эта библиотека на сайте. Если нет, то подключить ее достаточно просто, разместив между тегами head следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Теперь при перемещении по странице вашего сайта посетитель будет плавно передвигаться от якоря к якорю, что сделает навигацию более понятной.

Чтобы посмотреть на результат нашей работы, жмем кнопку ниже.

Демо