Simple Back To Top Button

Simple Back To Top Button


<a href="#" id="archer"></a>


<style type="text/css">
	display: none;		/* we dont show the button while menu is visible */
	width: 80px;
	height: 80px;
	background: url(/images/backToTop.png) center center no-repeat;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;		/* to be at the top of all elements */


<script type="text/javascript">
$(window).scroll(function(){ 					//after scroll
	var docViewTop = $(window).scrollTop();		//get top of visible part of page
	var elemTop = $('header nav').offset().top;	//get top of menu/navigation
	if ( !( elemTop >= docViewTop ) ){			//if top of navigation is not in visible part of page
		$('#archer').fadeIn();					//show the 'back to top' button
		$('#archer').stop().fadeOut();					//else dont show the button (or hide if its showed)

$('#archer').click(function(){					//click on button cause..
	$(window).scrollTop(0);						//..the window is scrolling to top
	return false;								//'return false' to dont write char '#' to the end of an URL in the browser