ScrollTop doesn't work in Safari mobile

I'm trying to figure out why a div.scroll-top won't display in Safari mobile. Tested. It works properly on my iphone in Chrome browser. But Safari seems to be having an issue with calculating a window's height. The div doesn't appear when the browser's scrollbar height reaches a certain number.

HTML The div container is stored in a bottom of a page inside footer.

<div class="scroll-top">
   <a href="#"><i class="fa fa-arrow-up"></i></a>
</div>

CSS

.scroll-top {
   position: fixed;
   bottom: 3%;
   right: 5%; 
   background: #00316b;
   width: 50px;
   height: 50px;
   text-align: center;
   border-radius: 50%;
   border: 2px solid #fff;
   display: none;
}

.scroll-top > a {
   display: block;
   color: #fff;
   font-weight: bold;
   line-height: 50px;
   font-size: 20px;
}

Js

var scrollTop = $(".scroll-top");
$(window).scroll(function () {
    var topPos = $(this).scrollTop();

    if (topPos > 300) {
        $(scrollTop).fadeIn(200);
    } else {
        $(scrollTop).fadeOut(200);
    }  

}); 

$(scrollTop).click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 500);
    return false;
});

Attempted fixing it with vanilla JavaScript, but still no luck.

document.addEventListener("scroll", function(){
    var windowScrollY = window.scrollY;
    if (windowScrollY > 300) {
        document.querySelector(".scroll-top").style.display = "block";
    } else {
        document.querySelector(".scroll-top").style.display = "none";
    }
});

Could you give me an idea how to make Safari display div.scroll-top when the browser's scrollbar height is greater than 300?