Наверху кнопка не нажимает - jquery

Question

Я пытаюсь выполнить функцию «back to top» на странице через простой jquery. Кнопка «BACK TO TOP» появляется/исчезает, как ожидалось. Когда он появится, если я нажму на него, я ожидаю, что он переместится в начало страницы, вместо этого ничего не произойдет. Я не уверен, что происходит не так.

Вот код:

CSS:

#btoTop { 
     padding: 15px 10px; 
     background: #1f242a; 
     color: #fff; 
     position: fixed; 
     bottom: 0; 
     right: 15px; 
     display: none; 
     cursor:pointer; 
     cursor:hand; 
     width:130px; 
     height:40px; 
    } 

HTML:

<div id='btoTop'>BACK TO TOP</div> 

ЯШ:

$(document).ready(function(){ 
     $(window).scroll(function(){ 
      if($(window).scrollTop() > 0){ 
       $("#btoTop").fadeIn("slow"); 
      } 
      else { 
       $("#btoTop").fadeOut("slow"); 
      } 
     }); 
     $("#btoTop").click(function(event){ 
      event.preventDefault(); 
      $("html, body").animate({scrollTop:0 },"slow"); 
     }); 
}); 

Примечание: Если я вызываю функцию щелчка внутри $ (window) .scroll(), я могу нажать кнопку. Но он мерцает и не работает с изменением размера окна.

$(document).ready(function(){ 
     $(window).scroll(function(){ 
      if($(window).scrollTop() > 0){ 
       $("#btoTop").fadeIn("slow"); 
      } 
      else { 
       $("#btoTop").fadeOut("slow"); 
      } 
      $("#btoTop").click(function(event){ 
       event.preventDefault(); 
       $("html, body").animate({scrollTop:0 },"slow"); 
      }); 
     }); 

}); 

Answer 1

Я понял, что кнопка еще не была доступна в DOM, когда я пытался ее щелкнуть. Добавление таймера на нем работало довольно хорошо. Надеюсь, что это помогает кто-то там с подобным вопросом ...

$(document).ready(function(){ 
      $(window).scroll(function(){ 
       if($(window).scrollTop() > 0){ 
        $("#btoTop").fadeIn("slow"); 
       } 
       else { 
        $("#btoTop").fadeOut("slow"); 
       } 
      }); 
      $timeout(function() { 
       $("#btoTop").click(function(event){ 
        event.preventDefault(); 
        $("html, body").animate({scrollTop:0 },"slow"); 
       }); 
      }, 500); 
}); 

Answer 2

Вы связывание click на кнопке каждый раз, когда вы прокрутку, которое не является необходимым. Вы должны изменить его:

$(document).ready(function() { 

    $(window).scroll(function() { 

    if($(window).scrollTop() > 0) { 

     $("#btoTop").fadeIn("slow"); 

    } else { 

     $("#btoTop").fadeOut("slow"); 
    } 
    }); 

    // Bound a single time 
    $("#btoTop").click(function (event) { 

    event.preventDefault(); 
    console.log("Clicked the button"); 
    $("html, body").animate({scrollTop:0 },"slow"); 

    }); 
}); 

Это может быть не проблема, но должны быть изменены, чтобы избежать странного поведения в вашем коде.