Плавная прокрутка к #якорю

Плавная прокрутка в верх страницы очень удобна для посетителей сайта, так как предоставляет быстрый способ вернуться к началу страницы. Вот простой способ решения такой задачи:

<h1 id="anchor">Заголовок</h1>
<!-- Здесь много много контента -->
<p><a href="#anchor" class="topLink">К началу страницы</a></p>

Непосредственно фрагмент jQuery.

$(document).ready(function() {

   $("a.topLink").click(function() {
      $("html, body").animate({
         scrollTop: $($(this).attr("href")).offset().top + "px"
      }, {
         duration: 500,
         easing: "swing"
      });
      return false;
   });

});

Параметр duration отвечает за скорость прокрутки в миллисекундах, easing — эффект прокрутки (их достаточно много поэтому вот ссылка на документацию).
Теги:
Плавная прокрутка
Добавлено: 20 Апреля 2018 13:21:58 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...