Матвей Земсков

Заметки веб-мастера

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

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

Прочитано 15100 раз
Добавить комментарий

Комментарии   

 
0 # Алла 19.01.2014 01:19
Спасибо, закрепила заголовок, все оказалось просто, а то крутился вместе со страницей :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 22.01.2014 11:09
Пожалуйста, Алла. Рад, что информация оказалась полезной
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Дмитрий 08.11.2014 17:46
Не работает.... Шапка зафиксирована но страница прокручивается целиком. Не работает отступ.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 11.11.2014 17:16
В документе, ссылку на который вы указали, ошибка при подключении javascript - у вас text/jawascript - неправильно, нужно text/javascript. Поправьте код, лучше его вообще разделить - css отдельно, javascript - отдельно. А то беспорядок получается какой-то. От этого и ошибки.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Роман 10.11.2014 08:18
Спс, информация помогла
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: