Скролл к следующей секции по клику на ссылку с плагином malihu page scroll to id

Question

Есть такая разметка и плагин для навигации по секциям page-scroll-to-id :

if ($(".m_PageScroll2id").length) {
  $(".m_PageScroll2id").mPageScroll2id({
    highlightSelector: "#nav a"
  });
}

.section {
  height: 1000px;
  background: #eee;
  border: 1px solid;
}

#nav {
  position: fixed;
  right: 0;
  z-index: 3;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.malihu.PageScroll2id.min.js"></script>

<div id="nav" class="fp-right">
  <ul>
    <li>
      <a href="#sec-1" class="m_PageScroll2id active">
        <span>Sec-1</span>
      </a>
    </li>
    <li>
      <a href="#sec-2" class="m_PageScroll2id">
        <span>Sec-2</span>
      </a>
    </li>
    <li>
      <a href="#sec-3" class="m_PageScroll2id">
        <span>Sec-3</span>
      </a>
    </li>
    <li>
      <button type="button" class="next">
          <span>Далее</span> 
        </button>
    </li>
  </ul>
</div>

<main>
  <div class="section" id="sec-1">1</div>
  <div class="section" id="sec-2">2</div>
  <div class="section" id="sec-3">3</div>
</main>

Вопрос: как можно реализовать клик на кнопку "далее" и переход на следующую секцию?

Answer 1

Найти закономерность что меняется при скроллах и кликах
Как видно у кнопок устанавливается класс 'mPS2id-highlight'
При клике на "Далее" выбираем текущий элемент
Эмулируем CLICK на следующей кнопке

PS: Может по ходу еще чего присмотреть.

Внизу рабочий сниппет:

document.addEventListener('DOMContentLoaded', () => {
  if ($(".m_PageScroll2id").length) {
    $(".m_PageScroll2id").mPageScroll2id({
      highlightSelector: "#nav a"
    });

    let butt = document.querySelector("#nav button")
    let selButts = Array.prototype.slice.call(document.querySelectorAll('.m_PageScroll2id'))

    butt.addEventListener('click', () => {
      let currentSel = selButts.findIndex(({ classList }) => classList.contains('mPS2id-highlight'))
      if (currentSel === -1) {
        return
      }
      let e = selButts[currentSel > 1 ? (currentSel = 0) : (++currentSel)]
      e.click()
    })

  }
}, { once: true })

.section {
  height: 1000px;
  background: #eee;
  border: 1px solid;
}

#nav {
  position: fixed;
  right: 0;
  z-index: 3;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.malihu.PageScroll2id.min.js"></script>

<div id="nav" class="fp-right">
  <ul>
    <li>
      <a href="#sec-1" class="m_PageScroll2id active">
        <span>Sec-1</span>
      </a>
    </li>
    <li>
      <a href="#sec-2" class="m_PageScroll2id">
        <span>Sec-2</span>
      </a>
    </li>
    <li>
      <a href="#sec-3" class="m_PageScroll2id">
        <span>Sec-3</span>
      </a>
    </li>
    <li>
      <button type="button" class="next">
          <span>Далее</span> 
        </button>
    </li>
  </ul>
</div>

<main>
  <div class="section" id="sec-1">1</div>
  <div class="section" id="sec-2">2</div>
  <div class="section" id="sec-3">3</div>
</main>

БЛОГ НА HUSL

Скролл к следующей секции по клику на ссылку с плагином malihu page scroll to id

Ответы (1 шт):