Question

我的＆lt;＆lt;头＆gt;当窗口距离底部150px时，标记会使按钮淡入。

<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格式。

Answer 2

您可以在Javascript中使用matchMedia作为CSS媒体查询的等效内容，这样您就可以了解屏幕是否为移动尺寸。

示例（来自MDN）：

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

删除＆＃39;向上滚动＆＃39;移动脚本

2 个答案: