$window.scroll(showScroll()) не работает, но onscoll="showScroll()" есть?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я посмотрел на другие темы, и их ошибки были связаны с опечатками, я не уверен, где я ошибаюсь. Я вообще не вижу кнопки прокрутки. Это работает, когда я вызываю функцию showScroll() из тела моего html, используя <body onscroll="showScrol()"> , но это не работает в IE, поэтому я пытаюсь использовать эту функцию, но она не работает:

 // SCROLL TO TOP
$(document).ready(function() {

  $(window).scroll(showScroll());

  function showScroll() {
    if ($(window).scrollTop() > 50) {
      $("#top-btn").show();
    } else {
      $("#top-btn").hide();
    }
  }

  function scrollToTop() { 
    $(window).scrollTop(0); 
  } 
});

Ответ №1:

$(window).scroll(showScroll()); означает, что вы выполняете функцию мгновенно, и возвращаемое значение передается в событие прокрутки.

Вместо $(window).scroll(showScroll); этого сделайте так, чтобы передавалась функция.

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

 // SCROLL TO TOP
$(document).ready(function() {

  $(window).scroll(showScroll); // <-- this was changed

  function showScroll() {
    if ($(window).scrollTop() > 50) {
      $("#top-btn").show();
    } else {
      $("#top-btn").hide();
    }
  }

  function scrollToTop() { 
    $(window).scrollTop(0); 
  }
  
  const button = document.querySelector('button'); // <-- added this for completeness
  button.addEventListener('click', scrollToTop);
});

 main {
  height: 600px;
}

#top-btn {
  position: fixed;
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main>
  <button id="top-btn">Show me</button>
</main>