Как сделать поблочную прокрутку на 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>

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 7

  1. artemmian

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

  2. Константин

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

    • dimadv7

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

    • dimadv7

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

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

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

  3. Александр

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

  4. Al'Sabyr

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

  5. Михаил

    спасибо

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