Btukfyl

EDIT: It now works on Edge thanks to Bowie, but the problem still persists on mobile, where the button doesn't appear at all.

I'm completely new to web development and have been tasked to create a website from scratch. I've learned a fair deal of HTML and CSS and have started to get into Javascript and JQuery. I have tried to implement a fixed button that scrolls the page back up to the top that appears only after a certain distance has been scrolled. It works perfectly fine in Chrome, Internet Explorer and Firefoxon desktop, however in Edge the button appears but doesn't scroll the page at all. And on mobile the button doesn't even appear at all...

Here is the code for it:

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>

The link and scripts are in "head"and the a href is just underneath the closing tag for body.

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;

}

Most of the CSS is just styling and opacity change when hovering over it.

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;

    });

});

This is JS that I learned and implemented myself.

This is a really frustrating compatibility issue that I've been trying to fix, however even though I've been trying really hard to learn JS and JQuery, I'm finding it difficult to find a simple and easy to understand solution that is not many 10s of lines long, and even then some of those ones don't work on mobile.

I tried using the jQuery Mobile library too hosted by Google but that did nothing to fix the issue.

So here is my question:

How can I go about fixing this code and make it work on mobile and in Edge in the simplest and easiest way to understand for someone who has only just started web development.

Thanks, Alex.

Change $("html").animate to $("html,body").animate