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

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