Обычно меню, размещаемое на посадочной странице, – горизонтальное, а контент разделен на блоки. Казалось бы, нет ничего сложного в организации перемещения от блока к блоку: нужно присвоить идентификаторы к блокам и добавить их значения в ссылки меню. Однако, хотелось бы добавить странице динамичности, а посетителям - удобства. Поэтому, поступим следующим образом: зафиксируем блок с меню вверху страницы и обеспечим плавное перемещение по ней при взаимодействии со ссылками из меню.
Чтобы все это правильно работало, необходимо создать страницу, согласно схеме, показанной на рисунке.
Для фиксации верхнего меню, применим к элементу <header>
следующие CSS-правила:
CSS
Чтобы блок с меню не закрывал блоки с контентом, сделаем у первого блока (section#block1
) отступ сверху. Он должен быть равен высоте элемента <header>
.
CSS
На данный момент мы имеем вполне рабочую страничку, но при клике по ссылкам переход к блокам осуществляется сразу. Хотелось бы сделать так, чтобы переход от блока к блоку осуществлялся плавно. Этим сейчас и займемся. Нам поможет небольшой скрипт на jQuery. Обратите внимание, что версия библиотеки jQuery должна быть младше 1.9, иначе скрипт работать не будет.
Я подключил jQuery 1.8.3 с сайта code.jquery.com
HTML
После подключения jQuery перейдем непосредственно к скрипту: разместим его в разделе <head> страницы, или в отдельном JS-файле и подключим к нашей странице.
JavaScript
Если мы все сделали правильно и нигде не ошиблись, то получили ожидаемый эффект. При клике по ссылкам переход от одного блока к другому будет происходить плавно, причем неважно в каком месте страницы вы «находитесь» в данный момент. Происходит все это благодаря функции animate()
библиотеки jQuery. Таким образом, казалось бы простой скрипт придает странице «изюминку», а благодаря тому, что меню всегда доступно, посетителю становится удобнее перемещаться по странице.