2016
14
Дек

Html навигация по странице

grigoriev
1971
html навигация по странице
посмотреть click css
DEMO

Часто на сайтах, где на одной странице находится много контента применяют навигацию на хэштэгах. Это самая простейшая 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 Ответить

Хмм. Если подчёркнутые ссылки нормально вписываются в дизайн сайта, то почему бы и нет. Однозначно сказать не могу. По моему подчёркивание ссылки сильно юзабилити не улучшает. Пользователи интернет сейчас достаточно грамотные.

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

Защитный код
Обновить

Нажимая кнопку «Отправить», я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности этого сайта

Используя данный сайт, вы даете согласие на использование файлов cookie, помогающих мне сделать его удобнее для вас. Уведомление о cookie