javascript - "Back to Top"按钮仅在窗口滚动时可见(但在移动设备上不起作用)

Question

我正在尝试制作一个 BTT(返回顶部):这太简单了，当用户滚动整个窗口(视口(viewport))时，BTT 会出现在内容的底部(例如在页脚附近的网站中) )。因此，如果高度的内容小于高度的窗口，则 BTT 会被隐藏。

问题是我的代码无法在移动设备(chrome、safari、firefox)上运行，而在桌面浏览器上但使用调整窗口大小时我没有问题(除了 chrome)。我不明白问题出在哪里......:

if($('body,html').scrollTop()< $(window).height()){
 $('#btt').css('display','none');
}

$('#btt').click(function(){
 $('body,html').animate({scrollTop: 0},400);
});

$(window).scroll(function(){
    if($('body,html').scrollTop()< $(window).height()){
     $('#btt').css('display','none');
    }
     else{
        $('#btt').css('display','block');
    }

这个CSS:

    #btt {
        background: #a0a0a0 none repeat scroll 0 0;
        border: 1px solid #404040;
        border-radius: 10px;    
        float: right;
        height: 30px;
        margin-bottom: 20px;
        margin-top: 20px;
        width: 90px;
        cursor: pointer;
    }

    #spanbtt {
        align-items: center;
        color: #000;
        display: flex;
        font-size: 15px;
        height: 100%;
        justify-content: center;
        width: 100%;
    }

    #bttspanid {    
        font-size: 15px;    
        margin-left: 10px;
    }

这个 HTML:

<div id="btt">
    <div id="spanbtt">Torna su <span id="bttspanid" class="fa fa-arrow-up"></span></div>
</div>

这是 jsfiddle:

https://jsfiddle.net/3z6yka72/

我还尝试将 $(window).height() 替换为 window.outerHeight 但我遇到了问题(使用移动浏览器时，BTT 是可见的，但它如果内容高度小于窗口高度，则 BTT 也可见，而使用桌面 Chrome 时，BTT 是隐藏的)...

我希望你能帮助我，对我的英语感到抱歉。

非常感谢!

Answer 1

为窗口高度设置一个变量，以便存储它。

这是给您的更新的 fiddle 。

$('#btt').click(function() {
  $('body,html').animate({
    scrollTop: 0
  }, 400);
});
$(window).scroll(function() {
  var windowH = $(window).height();
  if ($(this).scrollTop() < windowH) {
    $('#btt').removeClass('show');
  } else {
    $('#btt').addClass('show');
  }
});

https://jsfiddle.net/3z6yka72/1/

希望有帮助。