Make an html element appear when page is scrolled down - html

Question

I want my "Back to top" button to appear when the user scrolls about half down the webpage not immediately once the web page shows up. How would you be able to do that using HTML and CSS?
Element I want to appear about half way down and click to go back to the top:
<img id="upArrow" src="Images/arrow-up.png" alt="Up arrow">

Answer 1

Let me know if this works:
Edit: Added animation to return user to top on .click
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('#upArrow').fadeTo(500, 1);
}
});
$('#upArrow').click(function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
});
</script>
Set your upArrow as:
<img id="upArrow" style="opacity: 0;" src="Images/arrow-up.png" alt="Up arrow"/>
Alternative .js:
$(document).ready(function(){
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 500 // Edit this number to define how far down the page the div fades in.
if(y_scroll_pos > scroll_pos_test) {
$('#upArrow').fadeTo(500, 1);
}
});
});
$('#upArrow').on("click",function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
});