JQuery 滚动按钮在某些浏览器和移动设备上不起作用
JQuery scroll button not working on certain browsers and mobile
编辑:由于 Bowie,它现在可以在 Edge 上运行,但问题仍然存在于移动设备上,按钮根本没有出现。
我是网络开发的新手,我的任务是从头开始创建一个网站。我已经学习了很多 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>
link 和脚本在 "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 行,即使这样,其中一些也无法在移动设备上运行。
我尝试使用 jQuery 移动图书馆也由 Google 托管,但这并没有解决问题。
所以这是我的问题:
对于刚开始 Web 开发的人来说,我如何才能以最简单易懂的方式修复此代码并使其在移动设备和 Edge 中运行。
谢谢,Alex。
将$("html").animate
更改为$("html,body").animate
编辑:由于 Bowie,它现在可以在 Edge 上运行,但问题仍然存在于移动设备上,按钮根本没有出现。
我是网络开发的新手,我的任务是从头开始创建一个网站。我已经学习了很多 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>
link 和脚本在 "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 行,即使这样,其中一些也无法在移动设备上运行。
我尝试使用 jQuery 移动图书馆也由 Google 托管,但这并没有解决问题。
所以这是我的问题:
对于刚开始 Web 开发的人来说,我如何才能以最简单易懂的方式修复此代码并使其在移动设备和 Edge 中运行。
谢谢,Alex。
将$("html").animate
更改为$("html,body").animate