ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Cсылка якорь на странице. Плавный якорь

.

yakorCсылка якорь на странице. Плавный якорь.

Всем привет!

В сегодняшней заметке  Вы узнаете о том, что такое html cсылка якорь на странице сайта и вдобавок я приведу для своих читателей простейший пример плавной прокрутки до якоря на JQuery.

Cсылка якорь на странице это не что иное как элемент навигации по контенту страницы. Обычно веб-мастера используют такие ссылки для навигации по разделам. Особенно актуальны такие ссылки, когда на странице много контента, состоящего из нескольких разделов. Веб-мастера в таких случаях создают своеобразные оглавления. Пример:

oglav

Также в меню одностраничников Landing Page используются якоря навигации по разделам. Та же кнопка наверх — не что иное, как ссылка якорь.

Cсылки якоря на странице являются одной из составляющих CEO оптимизации статьи, так как они повышают юзабилити сайта, и поисковые системы обращают на это свое внимание.

Как сделать html ссылку якорь на странице

Cделать html ссылку якорь на странице очень просто. Для этого нужно:
Присвоить в нужном месте страницы, например заголовку раздела страницы идентификатор ID.

ID="RAZDEL"— это и есть идентификатор ID, который я присвоил заголовку одного из разделов воображаемой страницы. Название идентификатора может быть любым, но должно использоваться только один раз на странице.

Теперь осталось создать обычную html ссылку и ссылаться она должна на присвоенный разделу идентификатор ID.

При нажатии на такую ссылку осуществиться переход до якоря —

Плавный якорь jQuery

Единственным визуальным недостатком html ссылок якорей является переход к разделам как-бы рывком. Но этот недостаток устраняется подключением небольшого скрипта плавного скролла при прокрутке страницы до якоря.

Библиотека jQuery

Для создания плавных якорей при прокрутке страницы необходимо подключение библиотеки jQuery. На WordPress библиотека jQuery подключена по умолчанию.

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

В данном скрипте можно настроить скорость прокрутки до якоря изменив значение 1000 на другое.

Ну вот и все друзья! Теперь вы знаете как сделать ссылку якорь для своего сайта на WordPress.

БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *