Дек
Html навигация по странице
![html навигация по странице](/images/hash_menu.png)
![посмотреть click css](/images/demo.png)
Часто на сайтах, где на одной странице находится много контента применяют навигацию на хэштэгах. Это самая простейшая html навигация по странице. Примером может служить википедия. Смысл заключается в том, что при клике на ссылке происходит перемещение к определённому параграфу. Давайте разберёмся как это устроено и заданим плавность при прокрутке страницы.
Так же такую навигацию называют навигация по якорям.
Для начала создадим якоря в ссылках и тексте. Создадим горизонтальное меню и назовём его topmenu
. Пункт меню будет являться ссылкой.
В ссылке будет стоять хэштег с номером параграфа <a href="#paragraf-1">item1</a>
. Параграф 1 будет начинаться с заголовка <h3>
.
В заголовке будет id c таким же названием как и хэштег <h3 class="point1" id="paragraf-1">paragraf 1</h3>
. Это и будет наш якорь.
При нажатии на ссылку меню будет происходить переход к нашему якорю. Ниже приведён листинг html кода меню и параграфов.
<div class="topmenu-container"> <ul class="topmenu"> <li><a href="#paragraf-1">item1</a></li> <li><a href="#paragraf-2">item2</a></li> <li><a href="#paragraf-3">item3</a></li> <li><a href="#paragraf-4">item4</a></li> <li><a href="#paragraf-5">item5</a></li> <li><a href="#paragraf-6">item6</a></li> </ul> </div> <div class="clear"></div> <div class="content"> <h3 id="paragraf-1">paragraf 1</h3> /*----------какой то текст------*/ <h3 id="paragraf-2">paragraf 2</h3> /*----------какой то текст------*/ <h3 id="paragraf-3">paragraf 3</h3> /*----------какой то текст------*/ <h3 id="paragraf-4">paragraf 4</h3> /*----------какой то текст------*/ <h3 id="paragraf-5">paragraf 5</h3> /*----------какой то текст------*/ <h3 id="paragraf-6">paragraf 6</h3> /*----------какой то текст------*/ </div>
Осталось нам осуществить плавность данного перехода. Для этого нам понадобится библиотека jquery. Подключим её в хэдер.
$(document).ready(function(){ $('.topmenu a').click(function(){ /*задали какой мы хотим отступ от верха страницы*/ var otstupTop=100; $('body,html').animate({ /*получили положение элемента вычли отступ и прокрутили*/ scrollTop: $($(this).attr('href')).offset().top-otstupTop }, 1500); }); });
Этот код нужно пояснить подробнее. Мы задали анимацию прокрутки scrollTop
с временем 1500 для элементов body,html
при клике
по ссылке в меню .topmenu a
. Что бы у нас получился отступ от верха экрана в 100px мы его сначало задали переменной var otstupTop=100
и вычислили вычтя его из
$(this).attr('href')).offset().top
. Это расстояние, которое нужно прокрутить до параграфа, смотря по какой ссылке мы кликнули.
Комментарии
Азамат
10.03.2017 22:00 Ответить
Хотелось бы и ваше мнение выслушать по поводу подчеркивания ссылок.
Лебедев считает, что нужно все подчеркивать. Aic что то подчеркивает, что то нет.
Я на сайте http://websalamat.ru - так же что то подчеркиваю, что то нет. Вы какого мнения?
Алексей Григорьев
11.03.2017 08:53 Ответить
Хмм. Если подчёркнутые ссылки нормально вписываются в дизайн сайта, то почему бы и нет. Однозначно сказать не могу. По моему подчёркивание ссылки сильно юзабилити не улучшает. Пользователи интернет сейчас достаточно грамотные.