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

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

Здравствуйте уважаемые читатели блога вебмастера! Сегодня мы поговорим о том, как сделать плавную прокрутку страницы к якорю с помощью 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 / 524

No avatar

Комментарии (9)

  1. Кирилл 28 ноября 2016, 10:00 # 0
    var href=$(this).attr('href');
      var target=$(href);
      var top=target.offset().top;
    — вполне можно заменить на

    var href=$(this).attr('href');
               top=$(href).offset().top;
    1. Игорь 28 ноября 2016, 11:02 # 0
      Здравствуйте. Я понимаю, что можно заменить так, но так как эта статья поучительная, ведь это урок для новичков, я стараюсь расписывать подробнее, чтобы было понятно.
    2. Игорь 07 февраля 2016, 19:42(Комментарий был изменён) # 0
      P.S. если у Вас CMS MODx, то якорь нужно указывать так:
      <a href="[[*uri]]#yakor">Спуститься к якорю</a>
      1. Павел 08 января 2017, 22:21 # 0
        Добрый день! в если ссылка генерируется pdoMenu. Как заставить pdoMenu ссылку на якорь?
        1. Игорь 08 января 2017, 22:31(Комментарий был изменён) # 0
          Здравствуйте! В административной панели MODX, на странице ресурса необходимо ввести в поле псевдоним адрес типа #yakor, если ругаться не будет, то все ок. Или есть второй вариант, когда вызываете pdoMenu
          &tpl=`@INLINE <li[[+classes]]><a href="#[[+link]]" [[+attributes]]>[[+menutitle]]</a> ([[+children]])</li>[[+wrapper]]`
          1. Павел 09 января 2017, 00:31 # 0
            Спасибо за помощь! но то-ли лыжи как говориться, то-ли я… Не получается к сожалению.
            Есть div с неким id. На главной сделано меню [[pdoMenu? &parents = `0` &outerClass = `top-menu` &level = `1` &scheme=`abs` ]] такого вида… Ваш код не сработал. В псевдоним подставить нельзя…
            1. Игорь 09 января 2017, 01:07(Комментарий был изменён) # 0
              Код вызова должен быть такой. Должно работать. Посмотрите исходный код, ссылки должны быть в виде якорей. Правда не знаю зачем используете scheme…
              [[pdoMenu? 
              &parents = `0` 
              &outerClass = `top-menu` 
              &level = `1` 
              &scheme=`abs` 
              &tpl=`@INLINE <li[[+classes]]><a href="#[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
              ]]
              1. Павел 09 января 2017, 16:46 # 0
                Если изменить &tpl=`@INLINE <li[[+classes]]><a href="#[[+link]]" [[+attributes]]>[[+menutitle]][[+wrapper]]` на вот так: &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]#[[+alias]]" [[+attributes]]>[[+menutitle]][[+wrapper]]`
                то работают якоря. Но)) по всему коду расставляются хаотично


                Причем именно контакты. И это ломает верстку…
                1. Павел 09 января 2017, 16:49 # 0
                  Если изменить &tpl=`@INLINE <li[[+classes]]><a href="#[[+link]]" [[+attributes]]>[[+menutitle]][[+wrapper]]` на вот так: &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]#[[+alias]]" [[+attributes]]>[[+menutitle]][[+wrapper]]`
                  то работают якоря. Но)) по всему коду расставляются хаотично
                  <a href="/kontaktyi.html#kontaktyi">
                    
                    <!-- 1 section -->
                    
                    </a>
                  
                  Причем именно контакты. И это ломает верстку…