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

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. Это расстояние, которое нужно прокрутить до параграфа, смотря по какой ссылке мы кликнули.