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

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

  1. artemmian

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

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

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

    • dimadv7

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

    • dimadv7

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

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

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

  3. Александр

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

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