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