Scroll Button

by bailey125_

HTML

<html>

<head>
<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>
</head>

<body>

<br style="line-height: 200">

</body>

<a href="#" id="scrollTop"></a>

</html>

CSS

#scrollTop {
    border-radius: 20px;
    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;
}

JavaScript

$(document).ready(function () {
    $(document).scroll(function() {
        if ( $(document).scrollTop() < 300 ) {
            $("#scrollTop").fadeOut();
        }
        if ( $(document).scrollTop() >= 300 ) {
            $("#scrollTop").fadeIn();
        }
    });

    $('#scrollTop').click(function () {
        $("html,body").animate({
            scrollTop: 10
        }, 600);
        return false;
    });
});