How to make an image a 'jump to' button? - html

Question

I have a small icon image of 'Arrow Up' at the bottom of my page.
How do I make this image a clickable button that jumps to the top of the page?
I am new to HTML and this is my first project so please bear with me.
So far I have tried:
input type="button" id="btnx" style="background-image:url('arrowup.png')"

Answer 1

Try this: Wrap your image in an anchor (A tag) link "#" will go to top
<img src="/some-image-folder/arrowup.png">
maybe your html is like this:
<i class="fa fa-arrow-up" aria-hidden="true"></i>
maybe you'd like to use the input button? Ok:
<form>
<input type="button" value="Click me" onclick="$(window).scrollTop(0);">
</form>

Answer 2

If you dont want to just jump to the top here is an animated method.
Animated with Image:
function topFunction() {
if (document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0) {
window.scrollBy(0, -50);
requestAnimationFrame(topFunction);
}
}
.test {
background-color: lightgrey;
padding: 30px;
height: 2500px;
margin-bottom: 10px;
}
<div class="test">Scroll to Bottom</div>
<img alt="Click" src="/images/arrowup.png">
Animated with Symbol:
function topFunction() {
if (document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0) {
window.scrollBy(0, -50);
requestAnimationFrame(topFunction);
}
}
.test {
background: lightgrey;
padding: 30px;
height: 2500px;
margin-bottom: 10px;
}
.uparrow {
color: white;
background: black;
font-size: 22px;
padding: 5px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="test">Scroll to Bottom</div>
<i class="material-icons uparrow"></i>

Answer 3

Check this FIDDLE
HTML
<h1>Top of the page</h1>
<article style="height: 1000px">
<p style="margin-bottom: 600px">Scroll down the page…</p>
<p>Then click the box.</p>
Scroll
</article>
Script
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});