О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Плавный скроллинг и плавающее меню
  • Инструменты
  • Заработок
  • Раскрутка
30 августа 2014 . Антон Кулешов

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

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

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

#Меню
6 585
Антон Кулешов
Два способа сделать меню для сайта на HTML и CSS Плавающее горизонтальное меню на jQuery Выпадающее меню на HTML и CSS Растянутый на всю ширину HTML список Ещё одно адаптивное меню
Комментарии не найдены

Всплывающие окна на jQuery за 3 минуты

Основы добавления материалов в Joomla

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание