Smartlanding

Как сделать поблочную прокрутку на landing page

Поблочная прокрутка на сайтеВсем — привет! Как-то, в разделе «Ваши предложения» меня просили рассказать о том, как сделать поблочную прокрутку на landing page (я ее называю полноэкранной прокруткой, но увы, такого запроса нет, а я стараюсь более-менее, но все-таки оптимизировать статьи), и вот решил написать пост на эту тему.

Как и просили, делать будем на примере fullpage.js (это такой jQuery плагин), который упростит нам задачу. Если кто-то не в курсе, о чем идет речь, то посмотрите сначала пример:

Посмотреть пример

Реализация поблочной прокрутке на сайте

Итак, так ка это jQuery плагин, то как обычно, первым делом подключаем сам jQuery, я сделаю это в конце страницы, так как вынесение скриптов в нижнюю область сайта позволяет ему грузиться быстрее, но это не всегда возможно, поэтому, в вашем случае может понадобиться подключение jQuery между тегами <head></head>:

<!-- Библиотека jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Следующим шагом подключаем сам плагин. Давайте сначала добавим скрипты, а потом css файл. Скрипты подключать после jQuery. У меня они лежат по такому пути: libs/fullpage/

<script src="libs/fullpage/jquery.easings.min.js"></script>
<script src="libs/fullpage/scrolloverflow.min.js"></script>
<script src="libs/fullpage/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
    $('#fullpage').fullpage();
});  
</script>

Последним скриптом производим инициализацию. Можно его вынести в отдельный файл, который будет срабатывать после загрузки всей страницы. Кстати, на странице плагина можно почитать об огромном количестве дополнительных настроек.

Теперь, давайте подключим css файл нашего плагина. Я сделаю это между тегам head, так как это один из файлов стилей, который влияет на общее отображение. Лежит он все в той-же папке fullpage:

<!-- CSS файл плагина fullpage -->
<link href="libs/fullpage/jquery.fullPage.css" type="text/css" rel="stylesheet">

Теперь перейдем к html разметке. Суть работы плагина заключается в том, что весь контент нужно обернуть в div с id=»fullpage», а блокам, по которым будет разделяться экран, и, соответственно, происходить прокрутка нужно добавить класс section

Сейчас я делаю пример с использование bootstrap и у меня получается такая структура:

<div id="fullpage">
    <section class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Первый экран</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Второй экран</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Третий экран</p>
          </div>
        </div>
      </div>
    </section>
  </div>

В принципе — на этом можно заканчивать, эффект мы реализовали. Но давайте сделаем еще и меню, которое будет прокручивать нас к нужному блоку. Так как начал делать с применением bootstrap, то давайте продолжим делать и дальше с применением этого замечательного фреймворка. Тем более, что пример с обычным меню есть на Github в инструкции к плагину.

Для того, чтобы сделать «якоря», к которым будет происходить прокрутка, блокам нужно указать специальный data атрибут data-anchor=»», с произвольным названием. Например, у меня это home, about и portfolio.

Затем, нужно создать само меню. Я делаю это до обертки id=»fullpage», которую мы сделали ранее, а затем сделаю его фиксированным в вверху экрана. Важно тегу li, задать атрибут data-menuanchor, в которых указать id блоков, к которым будет происходить прокрутка при клике на ссылку. Самим ссылкам тоже в атрибуте href указываем соответствующий id. И тегу ul нужно дать произвольный id, который позже укажем в настройках плагина. У меня это navigation.
Меню

   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul id="navigation" class="nav nav-justified">
          <li data-menuanchor="home"><a href="#home">Главная</a></li>
          <li data-menuanchor="about"><a href="#about">О нас</a></li>
          <li data-menuanchor="portfolio"><a href="#portfolio">Портфолио</a></li>
        </ul>
      </div>
    </div>
  </nav>

Итоговая структура блоков выглядит следующим образом:

<div id="fullpage">
    <section class="section" data-anchor="home">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Первый экран</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section" data-anchor="about">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Второй экран</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section" data-anchor="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Третий экран</p>
          </div>
        </div>
      </div>
    </section>
  </div>

Помните я говорил, что нужно указать id тегу ul, так вот, теперь его нужно прописать там, где мы инициализировали плагин:

<script>
    $(document).ready(function () {
      $('#fullpage').fullpage();
      menu: '#navigation'
    });
</script>

На этом — все. Ссылка на демо — вначале поста. А исходник — тут:

Скачать исходник

Поделитесь статьей в социальных сетях, чтобы не потерять

18 комментариев

  • artemmian

    Отлично! Спасибо! Давно искал,

    Ответить
  • Константин

    А есть возможность сделать без якоря в адресной строке?

    Ответить
  • dimadv7

    Привет. Попробую что-то придумать. Но это же готовый плагин, я не разработчик же. Если разберусь

    Ответить
  • dimadv7

    Смотри, если прокрутка без навигации вверху, то можно так:

    <script>
          $('#fullpage').fullpage({
            anchors: ['', '', ''],
          });
      </script>
    

    Тут количество пустых кавычек — количество блоков. Это вместо того скрипта, который был для инициализации.

    Ответить
  • Александр

    Как убрать белую полосу при просмотре на мобильных устройствах?

    Ответить
  • Al'Sabyr

    пропала полоса прокрутки справа… не подскажите как вернуть?

    Ответить
  • Михаил

    спасибо

    Ответить
  • Евгений

    Здравствуйте, подскажите пожалуйста, как подправить скрипт чтобы скролл по секциям не работал для мобильных устройств?

    Ответить
  • Димка

    Добрый день! Все работает, но появилась необходимость сделать текст на одном из слайдов! Текста много и пришлось добавить overflow: auto. Проблема в том, что текст не листается скролом, а переходит на следующий слайд. Как сделать, чтобы прокручивался текст до конца, а затем уже слайд перелистывался? Спасибо!

    Ответить
  • Аноним

    Как сделать небольшую прокрутку на одном определенном экране, вот как тут http://esytwin.ru/#rangesmall.

    Изначально мы прокручиваем все элементы одного экрана, докрутив до конца всех элементов данного экрана, нас перекидывает на следующий и так далее. Как это реализовать?

    Ответить
  • Аноним

    normalScrollElements: '#section1 .element', Вот ток сам не знаю как продолжить прокрутку автоматом, ниже вопрос задал автору статьи. Похоже что он ни на твой вопрос не знает ответа, а на мой и подавно.

    Ответить
  • Иван

    Здравствуйте! Данный функционал не работает в IE8. Не кидайте в меня тапком))) Но все же, есть необходимость сделать его работоспособным в этом древнем браузере. Как порешать такую проблему?

    Ответить
  • Руслан

    Здравствуйте! Поможете поставить это на WordPress?
    Давайте обсудим цену. Почта: ruscosmonavt@gmail.com
    skype: ruscosmonavt

    Ответить
  • hetop

    Спасибо за блог, очень много полезного для себя нашел.
    Делал лэндинг и брал у тебя информацию о анимации при прокрутке, с помощью wow.js. Решил добавить туда этот скрипт и wow.js отказался работать. Я разобрался и решил поделиться с вами.
    Если вы используете wow.js вместе с fullpage.js то в скрипте инициализации должно быть так:

    $(document).ready(function() {
    $('#fullpage').fullpage({
    scrollBar: true,
    });
    });
    

    Я использовал версию без якорей, для тех кто хочет с якорями:

    $(document).ready(function() {
    $('#fullpage').fullpage({
    scrollBar: true,
    });
    menu: '#navigation'
    });
    

    Важно! При таком подходе появятся полосы прокрутки, чтобы их убрать пишем в CSS

    html, body{
    overflow: hidden !important;
    }
    
    Ответить
  • dimadv7

    Привет. Спасибо большое, что не оставил без внимание, и нашел время, чтобы поделиться своим решением.

    Ответить
  • Надежда

    Al'Sabyr, здравствуйте! У меня такая же проблема. Вы решили её? Поделитесь, пожалуйста.

    Ответить
  • Андрей

    Сверстал страницу, в IE не хочет работать, пишет «Internet Explorer запретил выполнение сценариев и элементов ActiveX на этой странице».
    Подскажите, как исправить?

    Ответить
  • dimadv7

    Андрей, В Internet Explorer в Меню > Сервис > Свойства обозревателя > Дополнительно и ставим флажок: «Разрешать запуск активного содержимого файлов на моем компьютере». Когда загрузите на сервер, этого сообщение не будет, даже если вы этого не сделаете. То есть оно вылезает, только в если локальный файл открывать.

    Ответить

Добавить комментарий