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

Posted

技术标签:

【中文标题】JQuery 滚动按钮在某些浏览器和移动设备上不起作用【英文标题】:JQuery scroll button not working on certain browsers and mobile 【发布时间】:2019-04-26 07:50:18 【问题描述】:

编辑:感谢 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"  ></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 中运行。

谢谢,亚历克斯。

【问题讨论】:

【参考方案1】:

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

【讨论】:

嗨,我最初有这个,但也没有用。 编辑: 我刚刚又试了一次,它奏效了。也许我第一次语法不正确?不知道。至少它现在可以在 Edge 上运行。不过,仍然需要为移动设备修复它。感谢您的提示:) 不用担心,不同的浏览器对 HTML 或 Body 使用不同的控件。如果您能将此标记为正确,我将不胜感激!

以上是关于JQuery 滚动按钮在某些浏览器和移动设备上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Jquery滚动功能在iphone设备上不起作用

滚动上的fadeIn nav在移动设备上不起作用

带有“keyup”和“change”参数的 jQuery on() 方法在移动设备上不起作用

滚动事件在移动设备上不起作用

要求属性在移动设备上不起作用

Twitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用