jquery - JQuery 滚动按钮在某些浏览器和移动设备上不起作用

问题描述

编辑：感谢 Bowie，它现在可以在 Edge 上运行，但问题仍然存在于移动设备上，按钮根本没有出现。

我对 Web 开发完全陌生，我的任务是从头开始创建一个网站。我已经学习了大量的 HTML 和 CSS，并开始接触 Javascript 和 JQuery。我试图实现一个固定按钮，该按钮将页面滚动回顶部，该按钮仅在滚动一定距离后才会出现。它在桌面上的 Chrome、Internet Explorer 和 Firefox 中运行良好，但在 Edge 中，该按钮出现但根本不滚动页面。在移动设备上，按钮甚至根本没有出现......

这是它的代码：

HTML

<link href="Styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="Scripts.js"></script>

<a href="#" id="scrollTop"><img src="RFImages/arrow.png" height="102%" width="98%"></a>

链接和脚本位于“head”中，a href 位于 body 的结束标记下方。

CSS（文件是 Styles.css）

#scrollTop {
    border-radius: 10px;
    border: 5px solid #333333;
    width:80px;
    height:80px;
    background-color: #000000;
    position:fixed;
    display: none;
    opacity: 0.5;
    right: 40px;
    top: 30px;
}

#scrollTop:hover {
    opacity: 1;
}

大多数 CSS 只是在将鼠标悬停在其上时更改样式和不透明度。

JS（文件是 Scripts.js）

$(document).ready(function () {
    $(document).scroll(function() {
        if ( $(document).scrollTop() < 300 ) {
            $("#scrollTop").fadeOut();
        }
        if ( $(document).scrollTop() >= 300 ) {
            $("#scrollTop").fadeIn();
        }
    });

    $('#scrollTop').click(function () {
        $("html").animate({
            scrollTop: 10
        }, 600);
        return false;
    });
});

这是我自己学习和实现的JS。

这是我一直在尝试解决的一个非常令人沮丧的兼容性问题，但是即使我一直在努力学习 JS 和 JQuery，我发现很难找到一个简单易懂的解决方案许多 10 行长，即使这样，其中一些也无法在移动设备上运行。

我尝试使用 Google 也托管的 jQuery Mobile 库，但这并没有解决问题。

所以这是我的问题：

对于刚刚开始 Web 开发的人来说，我如何才能以最简单和最容易理解的方式修复此代码并使其在移动设备和 Edge 中工作。

谢谢，亚历克斯。

标签： jqueryhtmlcsscross-browsercompatibility

jquery - JQuery 滚动按钮在某些浏览器和移动设备上不起作用

问题描述

解决方案

推荐阅读