Делаем в теме WordPress якорные ссылки с плавным перемещением к выставленному якорю

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

Первым делом установим «якоря» в тех местах текста на текущей странице, на которые хотим сделать якорные ссылки. Якоря выставляем с помощью идентификаторов (id).
Получится приблизительно так:

1
2
3
4
5
6
7
8
9
10
11
12

<h4 id="anchor1" class="name-class">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</h4>
<h4 id="anchor2" class="name-class">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</h4>
<h4 id="anchor3" class="name-class">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</h4>

Следующим шагом создаём сами ссылки, указывающие на имена уже созданных выше якорей. При этом будем использовать обычный код ссылки, но с обязательным добавлением решетки «#» перед именем якоря. Это должно выглядеть примерно так:

1
2
3
4
5
6
7

<ul>
 	<li><a href="#anchor1">Ссылка 01</a></li>
 
 	<li><a href="#anchor2">Ссылка 02</a></li>
 
 	<li><a href="#anchor3">Ссылка 03</a></li>
</ul>

Вариантов компоновки и видов ссылок может быть значительное количество, главное будем соблюдать подстановку решетки к имени якоря.
Сохраняем и испытываем всё что было сделано выше. Творение отлично работает, но переход от ссылки до якоря происходит молниеносно, одним словом вовсе не радует глаз. Такую топорность исправим при помощи JavaScript’а который подключим к теме WordPress.

Для плавного «скольжения» страницы от ссылки до якоря создаём и вставляем в текущую тему WordPress небольшой скрипт.
Сохраняем и помещаем в каталог /js/ своей темы файл скрипта (scroll-anchor.js) со следующим содержанием:

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function() {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
    $target = $(target);
    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top
    }, 400, 'swing', function () {
      window.location.hash = target;
    });
  });
});

Полный путь должен выглядеть примерно так:
http://www.ДОМЕН.ru/wp-content/themes/ИМЯ_ТЕКУЩЕЙ_ТЕМЫ/js/scroll-anchor.js

Важно! Для нормальной работы скрипта требуется подключенная библиотека jQuery!.

Далее подключаем скрипт который был загружен в директорию /js/.
Вставляем в файл (footer.php) текущей темы непосредственно перед закрывающим тегом BODY следующий код:

1
2
3
4

<!-----------scroll-anchor----------->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/scroll-anchor.js">
</script>
<!---e-n-d---scroll-anchor---e-n-d--->

Сохраняем и обновляем (footer.php).

На этом всё! Теперь другое дело! Наслаждаемся плавным перемещением якорных ссылок.
Для изменения скорости перемещения необходимо править 8 строку в листинге скрипта (scroll-anchor.js). Чем цифра меньше, тем быстрее перемещение по странице от ссылки до якоря.

Пробуйте, удачи вам!