Как правило при создании посадочных страниц (landing pages), на них размещается довольно много информации. Я нашел довольно удобный способ навигации по landing page, о чем и расскажу в этой статье.
Обычно меню, размещаемое на посадочной странице, – горизонтальное, а контент разделен на блоки. Казалось бы, нет ничего сложного в организации перемещения от блока к блоку: нужно присвоить идентификаторы к блокам и добавить их значения в ссылки меню. Однако, хотелось бы добавить странице динамичности, а посетителям - удобства. Поэтому, поступим следующим образом: зафиксируем блок с меню вверху страницы и обеспечим плавное перемещение по ней при взаимодействии со ссылками из меню.
Чтобы все это правильно работало, необходимо создать страницу, согласно схеме, показанной на рисунке.
Схема страницы
Для фиксации верхнего меню, применим к элементу <header> следующие CSS-правила:
Code: Select all
header {
height: 145px;
position: fixed;
width: 100%;
z-index: 1000;
}Чтобы блок с меню не закрывал блоки с контентом, сделаем у первого блока (section#block1) отступ сверху. Он должен быть равен высоте элемента <header>.
Code: Select all
section#block1{
padding-top:145px;
}На данный момент мы имеем вполне рабочую страничку, но при клике по ссылкам переход к блокам осуществляется сразу. Хотелось бы сделать так, чтобы переход от блока к блоку осуществлялся плавно. Этим сейчас и займемся. Нам поможет небольшой скрипт на jQuery. Обратите внимание, что версия библиотеки jQuery должна быть младше 1.9, иначе скрипт работать не будет. Я подключил jQuery 1.8.3 с сайта code.jquery.com
Code: Select all
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>После подключения jQuery перейдем непосредственно к скрипту: разместим его в разделе <head> страницы, или в отдельном JS-файле и подключим к нашей странице.
Code: Select all
/*плавный переход к нужным блокам на странице*/
$('nav a').on('click',function () {
elementClick = $(this).attr("href");
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
// вычитаем высоту «шапки»
destination = $(elementClick).offset().top-145;
if($.browser.safari || $.browser.chrome){
$('body').animate( { scrollTop: destination }, 1100 );
}else{
$('html').animate( { scrollTop: destination }, 1100 );
}
return false;
}); Если мы все сделали правильно и нигде не ошиблись, то получили ожидаемый эффект. При клике по ссылкам переход от одного блока к другому будет происходить плавно, причем неважно в каком месте страницы вы «находитесь» в данный момент. Происходит все это благодаря функции animate() библиотеки jQuery. Таким образом, казалось бы простой скрипт придает странице «изюминку», а благодаря тому, что меню всегда доступно, посетителю становится удобнее перемещаться по странице.