Плавный скроллинг и плавающее меню

30 августа 2014 Антон Кулешов 2019 0

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

Реклама

Чтобы реализовать плавный скроллинг мы можем использовать JavaScript или библиотеку на основе его. Мне больше нравиться jQuery, поэтому для начала роботы подключим её:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Теперь мы нанесём на страницу HTML разметку:

<!-- Структура скролмени -->
<div class="scrollmenu">
	<ul>
		<li><a href="#block1">Пункт №1</a></li>
		<li><a href="#block2">Пункт №2</a></li>
		<li><a href="#block3">Пункт №3</a></li>
		<li><a href="#block4">Пункт №4</a></li>
		<li><a href="#block5">Пункт №5</a></li>
		<li><a href="#block6">Пункт №6</a></li>
	</ul>
</div>
<!-- Структура скролмени -->

<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
<div id="block6"></div>

Далее следуют CSS стили для оформления самого меню (в нашем случае, для удобства, меню будет плавающие):

body{margin: 0; padding: 0;}

#block1,
#block2,
#block3,
#block4,
#block5,
#block6{
	border: 2px solid red;
	width: 800px;
	height: 600px;
	margin: 15px auto;
}
#block1{background-color: #8EC1DA;}
#block2{background-color: #420100;}
#block3{background-color: #FF00AE;}
#block4{background-color: #FF4B37;}
#block5{background-color: #FFFF3C;}
#block6{background-color: #6CE26C;}

div.scrollmenu{
	background-color: #3187D0;
	margin: 0 auto;
	width: 100%;
	position:fixed;
	top:0;
	left:0;
	z-index: 999;
}
	div.scrollmenu ul{
		width: 70%;
		margin: 0 auto;
		padding: 15px 0 0px;
		text-align: justify;
		overflow: hidden;
	}
	div.scrollmenu ul:after{
		content: "";
		width: 100%;
		display: inline-block;
	}
		div.scrollmenu ul li{
			display: inline-block;
			color: #fff;
			text-transform: uppercase;
			cursor: pointer;
		}
			div.scrollmenu ul li a{
				color: #fff;
				text-transform: uppercase;
			}
			div.scrollmenu ul li a:hover{
				text-decoration: none;
			}

После всех подготовительных действий можно приступать к скрипту, хотя самого кода в разы меньше чем HTML и CSS.

$(function(){
	$("a[href*=#]").click(function(){
		$("html:not(:animated),body:not(:animated)")
			.animate({
				scrollTop: $($(this).attr("href")).offset().top
			}, 1000);
		return false;
	});
});

Вот и всё - скрипт готов. В этой статье показан пример, как сделать плавный скроллинг при нажатии на пункты меню, но в некоторых случаях нам нужно показать меню при определенной прокрутке, чтобы это сделать, можно воспользоваться моей статьёй «Плавающие меню на JQuery».

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

На сегодняшний день у многих высоко посещаемых и популярных сайтов есть мобильная версия. Но как же эти ресурсы определяют: с чего зашел пользователь на сайт? Этот вопрос мы и рассмотрим в статье, а также разберем скрипт, который поможет нам обеспечить необходимый функционал.

Ищем шрифты для оформления сайта

22 июля 2014 Антон Кулешов

Беря в верстку новый проект, очень часто сталкиваешься с проблемой отсутствия необходимых шрифтов, а если их нет у тебя – веб-разработчика, то, практически со 100% вероятностью, их нет и у рядового пользователя интернета, для которого ты и ваяешь сайт.

Умная кнопка прокрутки «Наверх и обратно»

22 ноября 2014 Антон Кулешов

Сегодня в статье я расскажу про плагин, который позволяет сделать кнопку прокрутки «Наверх» как Вконтакте. Это означает, что после прокрутки страницы в верхнее положение, пользователь может вернуться обратно туда, где он и находился.