javascript - 删除移动设备上的 'scroll up' 脚本

Question

我的 标签中有以下代码，当窗口距底部 150 像素时，该代码会淡入一个按钮。

<script>
  $(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) {
    $("#up-btn").fadeIn(500);
} else {
    $("#up-btn").fadeOut(500);
}
});
</script>

CSS

#up-btn {
position: fixed;
display: none;
font-size: 1em;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
bottom: -4px; right: 3%;
color: #fff;
border-radius: 2px;
background-color: #1aa97f;
padding: 18px 20px; margin: 25px auto 0 auto;
}

html

<footer>
  <a id="up-btn" href="javascript:void(0);" onclick="scrolltop();">TOP <i class="fa fa-chevron-up"></i></a>
</footer>

我希望#up-btn 在移动设备上保持“消失/消失”

Answer 1

你可以像这样包装你的 javascript 代码

if ($(window).width() > 768) {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) {
    $("#up-btn").fadeIn(500);
        } else {
    $("#up-btn").fadeOut(500);
        }
    });
};

现在您可以将“768”更改为您希望脚本运行的最低设备。上面的代码基本上会停止您的脚本运行，直到它达到 ipad 格式。