Fade-in Fade-out doesn’t work in WordPress


I have back-to-top script with an arrow icon which appears when scrolling down and disappears when the page content is on top. Works perfect, but when I insert the script in WordPress the scrollTop part of the script works but not the fade-in and fade-out effect.

Any solution?

jQuery('body').prepend('<a href="#" class="back-to-top">Back to Top</a>'); var amountScrolled = 300; $  (window).scroll(function() {     if ( $  (window).scrollTop() > amountScrolled ) {         $  ('a.back-to-top').fadeIn('slow');     } else {         $  ('a.back-to-top').fadeOut('slow');     } });  $  ('a.back-to-top, a.simple-back-to-top').click(function() {     $  ('html, body').animate({         scrollTop: 0     }, 700);     return false; }); 
body {background:#FEF1D4; height:1000px}  .back-to-top {     display: none;     width: 4.75rem;     height: 4.75rem;     text-indent: -9999px;     position: fixed;     z-index: 1500;     left: 0.5rem;     bottom: 1rem;     background: url(https://static.thenounproject.com/png/1920879-200.png) no-repeat center 43%;     background-size: contain; } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Expected result → jsfiddle

WordPress result ↓

enter image description here