CODEWITHSUNDEEP
htmlcssbuttonhyperlink
Hackheem Haimeed
Hackheem Haimeed

Reputation: 3

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

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')"

Upvotes: 1

Views: 980

Answers (3)

Devika V
Devika V

Reputation: 658

Check this FIDDLE

HTML

<h1>Top of the page</h1>

    <article style="height: 1000px">
        <p style="margin-bottom: 600px">Scroll down the page&hellip;</p>
        <p>Then click the box.</p>
        <a href="#" class="scrollup">Scroll</a>
    </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;
});

Upvotes: 0

Rick Sibley
Rick Sibley

Reputation: 625

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>
<a href="javascript:void(0)" onclick="topFunction();" id="btnx"><img alt="Click" src="/images/arrowup.png"></a>

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>
<a href="javascript:void(0)" onclick="topFunction();" id="btnx"><i class="material-icons uparrow">&#xE316;</i></a>

Upvotes: 0

Jim VanPetten
Jim VanPetten

Reputation: 436

Try this: Wrap your image in an anchor (A tag) link "#" will go to top

<a href="#"><img src="/some-image-folder/arrowup.png"></a>

maybe your html is like this:

<a href="#"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

maybe you'd like to use the input button? Ok:

<form>
  <input type="button" value="Click me" onclick="$(window).scrollTop(0);">
</form>

Upvotes: 1

Related Questions