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

Чтобы реализовать плавный скроллинг мы можем использовать 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».