How To Make A Scroll To Top Arrow With jQuery
I no longer write new content at tenghamn.com, you can find my new web related content at GoPHP.io and my personal blog posts at Ma.rkus.io.
My favorite domain registrar is NameSilo and if you use the affiliate link here it helps me earn some money from my writing: https://www.namesilo.com/pricing.php?rid=ee81e92mn, thanks! If you are new to NameSilo you can use my coupon, MARKUSTENGHAMN to save $1.00.
This post has been migrated and imported into different systems over the years, I have not had a chance to format this post manually so it may be hard to read but I have left it here as a reference.
I wanted to add a scroll to top arrow to a site I was doing for a client recently as I think it looks nice and clever. It is fairly simple to do. To begin make sure you have jQuery added to your page, the following code between your head tags will do the trick.
<pre lang="php"><br></br><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><br></br>
Now to add our arrow up button to the page I will use a 66px by 67px image as seen here.
(image removed)
To add this to the page using css I will use the following code between the head tags again.
<pre lang="php"><br></br><br></br><style><br />
.uparrow {<br />
background: url('../images/uparrow.png');<br />
cursor: pointer;<br />
width: 66px;<br />
height: 67px;<br />
position: fixed;<br />
bottom: 30px;<br />
right:30px;<br />
display:none;<br />
}<br />
</style><br></br>
This basically tells the browser that the element with the uparrow class will use the image as a background and be in a fixed position 30 px from the bottom of the window and 30px from the right side of the window. We also use display:none; to hide the element.
We can then add the element as a div to our page like so.
<pre lang="php"><br></br><div class="uparrow" id="uparrow"></div><br></br>
Then to top it off we need to add the jQuery code which will make this thing function. Add this almost anywhere on the page, I stuck mine between the head tags but some prefer to put it at the bottom of the page to make the page load faster.
<pre lang="php"><br></br><script type="text/javascript"><br />
$(document).ready(function(){<br />
// fade in and fade out<br />
$(function () {<br />
$(window).scroll(function () {<br />
if ($(this).scrollTop() > 50) {<br />
$('#uparrow').fadeIn();<br />
} else {<br />
$('#uparrow').fadeOut();<br />
}<br />
});<br />
<br />
// scroll body to 0px on click<br />
$('#uparrow').click(function () {<br />
$('body,html').animate({<br />
scrollTop: 0<br />
}, 800);<br />
return false;<br />
});<br />
});<br />
<br />
});<br />
</script><br></br>
If it is not working and you need to debug it, try using Firebug.