“返回顶部”按钮仅在窗口滚动时可见(但移动设备不起作用）

"Back to Top" button visibile only when the window is scroll (but with mobile doesn't work)

本文关键字：移动 不起作用 滚动 返回顶部 顶部 返回 按钮 窗口      更新时间：2023-09-26

我正在尝试制作BTT（返回顶部）：这太容易了，当用户滚动整个窗口（视口）时，BTT出现在内容的底部（例如在网站页脚附近）。因此，如果高度的内容小于高度的窗口，则 BTT 将被隐藏。

问题是我的代码在移动设备（chrome、safari、firefox）上不起作用，而在桌面浏览器上，但在调整大小窗口中我没有问题（使用 chrome 的 eccept）。我不明白问题是什么...

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.outerHeight替换$(window).height()但我遇到了问题（使用移动浏览器，BTT 是可见的，但如果高度内容小于高度窗口，它也可见，而使用桌面镀铬 BTT 是隐藏的）...

我希望你能帮助我，对不起我的英语。

多谢！

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

这是为您提供的更新小提琴。

$('#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/

希望对您有所帮助。

相关文章：