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>

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

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

Похожие публикации

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

  1. artemmian

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

    Ответить
  2. Константин

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

    Ответить
    1. dimadv7

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

    2. dimadv7

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

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

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

  3. Александр

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

    Ответить
  4. Al

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

    Ответить
    1. Надежда

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

  5. Михаил

    спасибо

    Ответить
  6. Евгений

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

    Ответить
    1. Алмаз

      Евгений,

      if(window.innerWidth > 720) {
      $(document).ready(function () {
      $('#fullpage').fullpage();

      });

      }

      То есть теперь скрит инициируется только на разрешениях больше 720 px

    2. Костян

      Алмаз, да, но, наверное, с оговоркой, что при загрузке страницы оно (разрешение) уже было больше 720px.

  7. Димка

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

    Ответить
    1. Аноним

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

  8. Аноним

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

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

    Ответить
  9. Иван

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

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

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

    Ответить
  11. 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;
}
    Ответить
    1. dimadv7

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

  12. Андрей

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

    Ответить
    1. dimadv7

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

  13. Леон

    Плагин, конечно, интересный. Но больше имиджевый, а не информационный. Идеален для рекламных сайтов/кампаний - когда на одну большую картинку накладывается пара предложений текста. На моб устройствах отключал - не было необходимости в нем.

    Ответить
  14. Артем

    Красавчик, кратко и лаконично

    Ответить
  15. Геннадий

    У меня не вышло. Сможете помочь сделать?

    Ответить
    1. dimadv7

      Геннадий, в статье же есть демо и исходник готовый, который работает... Чем помочь-то?

  16. Геннадий

    dimadv7, боюсь засорять своими глупыми вопросами чат, можно в личной переписки?. 9797773@mail.ru

    Ответить
    1. dimadv7

      Геннадий, да пишите сюда, ваши вопросы могут помочь и другим подписчикам. А, если что, уйдем в личные сообщения. Ничего не глупые, смело задавайте. Тут много новичков

  17. Дмитрий

    почему никто не поднимает вопрос о том, как быть когда содержимое блока по высоте больше экрана? как нужно доработать этот скрипт так чтобы доходя до края блока срабатывал moveUp или moveDown задумайтесь, это было бы очень полезно!

    Ответить
    1. Дмитрий Давыдов

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

  18. Дмитрий

    знаю много примеров когда без этого никак, есть даже js плагин в котором это реализовано, scrollify.js я столкнулся с этой проблемой и мне он очень помог

    Ответить
    1. Дмитрий Давыдов

      Дмитрий, отлично. В любом случае можно просто сделать внутреннюю прокрутку у блока при помощи overflow-y: scroll. Возможно есть еще какие-то подводные камни и это не все, но должно помочь, а так, если выбираем поблочную прокрутку, то контент в 99.9% случаев должен помещаться в экран устройства.

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