На некоторых сайтах можно увидеть такое явление как плавный скроллинг при нажатии на пункты меню, особенно это любят делать на страницах захвата. Это возможность позволяет быстро перемещаться между основными блоками контента.
Чтобы реализовать плавный скроллинг мы можем использовать 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».