Question

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

我是Web开发的新手，受过从零开始创建网站的任务。我已经学到了很多HTML和CSS，并且已经开始接触Javascript和JQuery。我试图实现一个固定的按钮，该按钮将页面滚动回到仅在滚动一定距离后才显示的顶部。它在Chrome，Internet Explorer和Firefoxon桌面上可以正常工作，但是在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”中，而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库，但这并不能解决问题。

这是我的问题：

我该如何解决此代码，并使它以最简单，最简单的方式在移动设备和Edge中工作，以使刚开始进行Web开发的人了解它。

谢谢Alex。

Answer 1

将$("html").animate更改为$("html,body").animate

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

1 个答案: