РЕДАКТИРОВАТЬ: теперь он работает на 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>
Ссылка и сценарии находятся в "заголовке", а href находится под закрывающим тегом для тела.
CSS (File is 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 (File is 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 Mobile, слишком размещенную в Google, но этоничего не сделал, чтобы решить проблему.
Так вот мой вопрос:
Как я могу идтиисправьте этот код и сделайте так, чтобы он работал на мобильных устройствах и в Edge самым простым и легким способом для тех, кто только начал веб-разработку.
Спасибо, Алекс.