Элемент скользит вверх и вниз несколько раз при прокрутке

Question

Я создаю кнопку прокрутки вверх, которая появляется, когда пользователь прокручивает до определенной точки. Я создал CodePen, который работает , но мой обычный код не работает; кнопка скользит вверх и вниз несколько раз. Я попытался добавить переменную debounce, как показано в следующем коде, но это просто показывает, а затем скрывает. Может ли это быть jQuery ошибка?

$(document).ready(() => {
  // Show scroll to top button on page scroll
  let $scrollToTop = $('#scrollToTop');
  let debounce = false;
  $('#content').on('resize orientationchange scroll', function () {
    const position = $(this).scrollTop();
    console.log(position);

    if (position >= 100 && !debounce) {
      debounce = true;
      $scrollToTop.slideDown(500, function () {debounce = false});
    } else if (position < 100 && !debounce) {
      debounce = true;
      $scrollToTop.slideUp(500, function () {debounce = false});
    }
  });
});

Редактировать

Mozilla рекомендует использовать CSS, когда это возможно , могу ли я это сделать? в этом случае?

Answer 1

Я бы настоятельно рекомендовал использовать метод scroll-behavior: smooth и просто использовать традиционный подход <a href="#content">. Вы можете обнаружить Safari и использовать window.requestAnimationFrame для самостоятельного кодирования анимации - это спасет вас от многих jQuery раздутий / ошибок.

Не стесняйтесь прочитать о scroll-behavior в Документы MDN или посмотрите это быстрое видео на YouTube .