Воскресенье, 08 декабря 2013 22:56

Плавное перемещение между блокам на веб-странице

Оцените материал

(6 голосов)

Как правило при создании посадочных страниц (landing pages), на них размещается довольно много информации. Я нашел довольно удобный способ навигации по landing page, о чем и расскажу в этой статье.

Обычно меню, размещаемое на посадочной странице, – горизонтальное, а контент разделен на блоки. Казалось бы, нет ничего сложного в организации перемещения от блока к блоку: нужно присвоить идентификаторы к блокам и добавить их значения в ссылки меню. Однако, хотелось бы добавить странице динамичности, а посетителям - удобства. Поэтому, поступим следующим образом: зафиксируем блок с меню вверху страницы и обеспечим плавное перемещение по ней при взаимодействии со ссылками из меню.

Чтобы все это правильно работало, необходимо создать страницу, согласно схеме, показанной на рисунке.

Для фиксации верхнего меню, применим к элементу <header> следующие CSS-правила:

CSS

header {
    height: 145px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

Чтобы блок с меню не закрывал блоки с контентом, сделаем у первого блока (section#block1) отступ сверху. Он должен быть равен высоте элемента <header>.

CSS

section#block1{
	padding-top:145px;
}

На данный момент мы имеем вполне рабочую страничку, но при клике по ссылкам переход к блокам осуществляется сразу. Хотелось бы сделать так, чтобы переход от блока к блоку осуществлялся плавно. Этим сейчас и займемся. Нам поможет небольшой скрипт на jQuery. Обратите внимание, что версия библиотеки jQuery должна быть младше 1.9, иначе скрипт работать не будет.

Я подключил jQuery 1.8.3 с сайта code.jquery.com

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

После подключения jQuery перейдем непосредственно к скрипту: разместим его в разделе <head> страницы, или в отдельном JS-файле и подключим к нашей странице.

JavaScript

	/*плавный переход к нужным блокам на странице*/
	$('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. Таким образом, казалось бы простой скрипт придает странице «изюминку», а благодаря тому, что меню всегда доступно, посетителю становится удобнее перемещаться по странице.

Посмотреть демо

Прочитано 29549 раз

Опубликовано в HTML-верстка

Теги

Другие материалы в этой категории: « Кратко о полизаполнении (Polyfill) Используем нестандартные шрифты на сайте »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх