Question

我正在努力实现＆＃34;回到顶部＆＃34;通过简单的jquery在页面上的功能。＆＃34;返回顶部＆＃34;按钮按预期显示/消失。当我点击它时出现，我希望它会转到页面顶部，而不会发生任何事情。我不确定出了什么问题。

以下是代码：

的CSS：

isset()

HTML：

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

JS：

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

注意：如果我在$（窗口）.scroll（）中调用click函数，我可以单击该按钮。但它在窗口调整大小时会闪烁，并且效果不佳。

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

2 个答案: