返回顶部按钮没有点击 - jquery

Question

我试图通过简单的 jquery 在页面上实现 "back to top" 功能。 "BACK TO TOP" 按钮 appears/disappears 符合预期。当我点击它出现时，我希望它会转到页面顶部，但什么也没有发生。我不确定出了什么问题。

代码如下：

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>

js:

$(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() 中调用点击函数，我可以点击按钮。但是它会闪烁并且不能很好地与 window 调整大小一起使用。

$(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

您每次滚动时都在按钮上绑定 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");

  });
});

这可能不是问题所在，但应该进行更改以避免代码中出现奇怪的行为。

Answer 2

当我试图点击它时，我发现 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);
});

返回顶部按钮没有点击 - jquery

Back to top button doesn't click - jquery

javascript

jquery

click

button