Sometimes we faced the problem on scrolling the content on the page and go to the bottom of the page and feel we need to go on top of the page. For that we need to scroll the page again which is irritating. If there would be any option to click on which we can jump to top of the page easily seems good.
Here is the code snippet by which we can implement this feature :
HTML
1 2 3 | <div id="backToTop" style="display: block;"> <a href="javascript:void(0)">Back to Top</a> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #backToTop { bottom: 0px; /* position to fixed the element from bottom */ position: fixed; right: 25px; z-index:9; /* z-index to set arrow display on top most */ } #backToTop a { background: url("images/up.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; height: 49px; text-indent: -9999px; /* for not to show the anchor text in html*/ width: 49px; } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | jQuery(document).ready(function($){ $("#backToTop").hide(); /* hiding the arrow on page load by default*/ $(window).scroll(function(){ if($(this).scrollTop()>100){ $('#backToTop').fadeIn(); }else{ $('#backToTop').fadeOut(); } }); $('#backToTop a').click(function() { $('body,html').animate({scrollTop:0},800); return false; /* for not jumping on anchor href */ }); }); |
Implementing arrow on scrolling the page is very easy and user friendly.