scroll

Плавный скролл

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

Начнем с примера HTML разметки, за основу возьмем простое меню лэндинга.

<ul id="menu-services-menu" class="menu rt-mega-menu-transition-slide">
  <li id="menu-item-528"><a href="#" data-id="main">Главная</a></li>
  <li id="menu-item-530"><a href="#" data-id="price">Цены</a></li>
  <li id="menu-item-529"><a href="#" data-id="about">О нас</a></li>
</ul>

data – это специальный атрибут который позволяет хранить различные данные записанные в элемент. В нашем случае это id, но вы можете назвать и записать его как угодно. Главное что бы этот атрибут имел префикса data-*.

Сам скрипт следующий

<script type="text/javascript">
 $(document).ready(function(){
  $('[data-id]').click(function(e){
   e.preventDefault();
   $('html,body').animate({scrollTop:$('#'+$(this).data("id")).offset().top-60},500);
  });
 });
</script>

Он считывает атрибут data-id и ищет совпадающий id который вы можете присвоить любому тегу.

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *