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

Здравствуйте уважаемые читатели блога вебмастера! Сегодня мы поговорим о том, как сделать плавную прокрутку страницы к якорю с помощью jQuery.

Для начала, давайте разберёмся что такое якорь.

Якорь на сайте - это, когда мы кликая по ссылке можем переместиться в любое место, в зависимости от того, куда ведёт якорь.

Якорь создать очень легко. Обычно якоря используют на страницах захвата (landing page).

Для того чтобы сделать прокрутку страницы, нам необходимо создать блок с уникальным ID. К примеру:

<div id=”yakor”>Ваш текст</div>

Можно использовать любые теги, тоесть h2, p, a, главное чтобы был уникальный id.

А чтобы, прокрутка страницы к якорю заработала, нам необходимо создать ссылку с наименованием id, то есть:

<a href="#yakor">Переместиться к якорю</a>

Ладно с якорями всё понятно. Но тут встаёт вопрос, как же сделать плавную прокрутку страницы к якорю? Для этого к нам на помощь приходит любимый jQuery.

Здесь я выложу скрипт, который будет выполнять плавную прокрутку.

$(function() {
  $('.menu a').click(function(event) {
  event.preventDefault();
  var href=$(this).attr('href');
  var target=$(href);
  var top=target.offset().top;
  $('html,body').animate({
    scrollTop: top
    }, 1200);	
  });
});

Тут скрипт обрабатывается по клику в классе menu, где лежить a. То есть:

<ul class="menu">
  <li><a href="#1">Первый якорь</a></li>
  <li><a href="#2">Второй якорь</a></li>
</ul>

И да, не забыйте подключить jquery.

Если у вас возникли вопросы, можете написать через форму ниже. Надеюсь статья была полезна.

28.01.2016 / 7291