Как установить обязательное условие для клика на устройствах IOS?

Question

Роберт

javascript , bootstrap

Как установить обязательное условие для клика на устройствах IOS?

Здравствуйте! У меня есть две липкие кнопки. <b>Первая</b> — это кнопка "Наверх", код которой представлен ниже: <br/> 
<pre><code class="javascript">$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() &gt; 115) {
      $('#backtotop').fadeIn();
    } else {
      $('#backtotop').fadeOut();
    }
  });
  $('#backtotop').on('click', function() {
      $('html, body').animate({
        scrollTop: 0
      }, 800);
      return false;
  });
});</code></pre> <br/> <br/> <b>Вторая</b> — кнопка саппорта, выполненная в виде dropdown-toggle (bootstrap 3), с условием, при котором она сворачивается при прокрутке вверх или вниз. Код этого условия: <br/> 
<pre><code class="javascript">var support = $(''),
	scrollPrev = 0;

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll &gt;= 5) {
    $('#widget-support').removeClass('open');
  }
});</code></pre> <br/> <br/> Проблема заключается в следующем: на устройствах IOS, после нажатия на кнопку "Наверх", если dropdown-toggle открыт, она сворачивается и происходит прокрутка вверх, как задумано. <b>Однако, чтобы открыть ее снова, необходимо нажать на кнопку дважды!</b> Как можно сделать так, чтобы она открывалась с первого нажатия?

30 января 2025 г. 17:44

Ответы на вопрос 1

Похожие вопросы

Answer 1

Ваша проблема связана с тем, что при нажатии на кнопку "Наверх", выполняется анимация прокрутки, которая может блокировать обработчик событий для кнопки-дропдауна, создавая таким образом необходимость в повторном нажатии.

Вы можете попробовать использовать метод `setTimeout`, чтобы немного задержать обработку клика на дропдаун, обеспечивая тем самым, что анимация прокрутки завершится перед тем, как обработчик события дропдауна сработает. Вот как это можно сделать:

1. При нажатии на кнопку "Наверх" временно отключаем обработчик для дропдауна.
2. После завершения анимации прокрутки восстанавливаем обработчик.

Вот пример кода, как это можно реализовать:

```javascript
$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 115) {
      $('#backtotop').fadeIn();
    } else {
      $('#backtotop').fadeOut();
    }
  });

  $('#backtotop').on('click', function() {
      // Отключаем событие click на дропдаун
      $('#widget-support').off('click');

      $('html, body').animate({
        scrollTop: 0
      }, 800, function() {
          // Включаем событие click на дропдаун обратно после завершения анимации
          $('#widget-support').on('click', function() {
              $(this).toggleClass('open');
          });
      });
      return false;
  });

  var support = $(''),
      scrollPrev = 0;

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 5) {
      $('#widget-support').removeClass('open');
    }
  });

  // Инициализация обработчика для дропдауна
  $('#widget-support').on('click', function() {
      $(this).toggleClass('open');
  });
});
```

Теперь при нажатии на кнопку "Наверх" сначала отключается обработка клика для дропдауна, затем происходит анимация прокрутки, и только после её завершения обработка кликов для дропдауна снова включается. Это должно устранить необходимость в повторном нажатии на кнопку дропдауна.