How to create a back to top icon in your web page

  • February 18, 2014
  • Boursinos Website
  • Jquery
  • Comments Off on How to create a back to top icon in your web page

A very nice demo for how to create a top icon in your web page when scrolling down.

A very nice example is from my web site http://www.boursinos.gr

Post inside your code

<script src=”js/jquery.min.js”></script>

<style>
.scrollup {
width: 38px;
height: 38px;
position: fixed;
bottom: 50px;
right: 100px;
display: none;
text-indent: -9999px;
background: url(‘images/top2.png’) no-repeat;
background-color: #000;
}
</style>
<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;
});

});
</script>

And somewhere inside the html
<a href=”#” class=”scrollup”>Scroll</a>

And save inside your images the image you want for the top icon!