Тридцатый первый урок. Навигация по странице

Как правило, лендинг достаточно длинная страница, состоящая из нескольких блоков. Верхнее меню используется для локальной навигации по этим блокам.

Вся навигация происходит через обычные ссылки тэга A, но в качестве адреса указывается атрибут ID.

<a href="#first">Первый блок</a>
...

<div id="first"></div>
<div>Первый блок ... </div>

В этом примере ссылка указывает на div#first. При этом данный блок пустой, но это не обязательно. В данном случае такой приём позволяет без проблем переместить div#first в любое место страницы, если потребуется поменять навигацию: никакой связи с другими блоками здесь нет.

Для того, чтобы обеспечить обратный переход к началу страницы, используется точно такой же приём: в конце каждого блока размещается ссылка с указанием на самый верхний блок, например #top.

<div id="top"></div>
Навигация: <a href="#b1">Первый блок</a> | <a href="#b2">Второй блок</a>
...

<div id="b1"></div>
<div>Первый блок</div>
<a href="#top">Вверх</a>

<div id="b2"></div>
<div>Второй блок</div>
<a href="#top">Вверх</a>

...

Локальную навигацию лучше всего делать уже после верстки всех блоков. При этом учитывайте, что навигация должна быть для тех блоков, которые не видны на этом же экране. То есть нет никакого смысла делать пункт меню, ссылающийся на шапку, поскольку она и так видна вместе с меню навигации.

Сейчас часто используется приём, когда вместо отдельных top-ссылок используют одну, которая в виде иконки постоянно отображается справа внизу. С её помощью можно прокрутить страницу вверх обычно с красивой анимацией (как в этом уроке).

Обычно это делается с помощью специальных jQuery-плагинов, но вместо этого, я даму вам код, который можно будет без каких-либо зависимостей (кроме самой jQuery и UniCSS-классов) разместить прямо в html-коде страницы. Вместо UniCSS-классов можно указать и свои.

<script>
$(function(){
	
	$("body").append("<div id='to_top' title='Вверх' class='hide-print pos-fixed pos10-r pos10-b bg-blue300 hover-bg-blue600 t-white hover-t-white cursor-pointer t24px i-angle-up icon-rounded trans05-bg-color bor-gray200 bor-solid'></div>");
	
	$("#to_top").hide(); $(window).scroll(function () {if ($(this).scrollTop() > 30) { $("#to_top").fadeIn();} else {$("#to_top").fadeOut(); } }); $("#to_top").click(function() {$("body,html").animate({scrollTop: 0}, 800); return false; }); 
});
</script>

С помощью UniCSS классов задаётся оформление иконки и её положение на странице, а выполнение js-кода автоматически добавляет иконку в html-код страницы. Именно поэтому такой код не требует создания html-разметки вручную.

Задание

Задания доступны только после авторизации.