0

Код делает прокрутку к якорям при нажатии на пробел(space). Но есть один баг. Когда нажимаешь много раз и быстро пробел оно скролит столько раз сколько ты нажал пробел. То есть ты уже ничего не нажимаешь(пробел), а скрол идет дальше. Нужно, чтобы работало как у https://aic.ru/

Как это исправить?

var i = 0;

$(window).on("keypress", function(e) {
  if (e.keyCode == 0 || e.keyCode == 32) {
    var $a = $('.anchor');
    $('html, body').animate({scrollTop: $a.eq( i ).offset().top}, 350);
    i = ( i === $a.length - 1 ) ? ( 0 ) : ( i + 1 );

  }
});
2
  • Просто уберите это: || e.keyCode == 32 из условия
    – Kirill
    15 авг 2019 в 9:32
  • Тогда скрипт не работает
    – Andrew
    15 авг 2019 в 11:13

1 ответ 1

0

var i = 0;

$(window).on("keydown", function(e) {

  if ($('html, body').is(':animated')) { // <--
    return;                              // <--
  }                                      // <--

  if (e.keyCode == 0 || e.keyCode == 32) {
    var $a = $('.anchor');
    $('html, body').animate({
      scrollTop: $a.eq( i ).offset().top
    }, 350);
    i = ( i === $a.length - 1 ) ? ( 0 ) : ( i + 1 );
  }
});
div{height:10000px;border:1px solid #000}
.anchor{margin-top:2000px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <p id="anchor1" class="anchor">anchor1</p>
  <p id="anchor2" class="anchor">anchor2</p>
  <p id="anchor3" class="anchor">anchor3</p>
  <p id="anchor4" class="anchor">anchor4</p>
</div>

1
  • Просто бомба! Огромное спасибо!
    – Andrew
    15 авг 2019 в 14:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.