Home > Web > Always back to top

Always back to top


Do you want a button in your web page to go back to top? Visible only when you need it? If yes, just include the following lines in your head tag.

<link type="text/css" rel="stylesheet" href="http://beradrian.users.sourceforge.net/articles/btt/btt.css" />
<script src="http://beradrian.users.sourceforge.net/articles/btt/btt.js"></script>

That was the really short version. If you want to know how it is done or how to customize it, I will explain it in detail.
First, the idea. We will automatically insert a button (DIV tag with A inside) and we will show it only when it is needed – when we already scrolled one page down. And it will stay in the same place no matter how much we scroll.

Let’s go first into the JavaScript.

function goToTop() {
	var body = (document.body ? document.body : document.documentElement);
	body.scrollTop = 0;
	body.scrollLeft = 0;
	return false;
}

function showBTT() {
	var body = (document.documentElement &amp;&amp; document.documentElement.scrollTop ? document.documentElement : document.body);
	document.getElementById("btt").style.display = (body.scrollTop &gt; body.clientHeight * 1.1 ? "block" : "none");
}

function initBTT() {
	var body = (document.body ? document.body : document.documentElement);
	var btt = document.createElement("DIV");
	body.appendChild(btt);
	btt.appendChild(document.createElement("A"));
	btt.id = "btt";
	btt.firstChild.href = "#";
	//btt.firstChild.innerHTML = "Back to top";
	btt.firstChild.style.display = "block";
	btt.firstChild.style.width = "100%";
	btt.firstChild.style.height = "100%";
	btt.firstChild.onclick = goToTop;
	
	showBTT();

	if (window.addEventListener) {
		window.addEventListener("scroll", showBTT, false);
	} else {
		window.attachEvent("onscroll", showBTT);
	}
}

if (window.addEventListener) {
	window.addEventListener("load", initBTT, false);
} else {
	window.attachEvent("onload", initBTT);
}

Now let me explain. Function goToTop simply scrolls to the top of the page. This is the handler called everytime the button is pressed by the user.

In showBTT (BTT stands for BackToTop button) we decide when to show the back to top button. The condition is body.scrollTop > body.clientHeight * 1.1, which means that we will show the button when we scrolled more than one screen with 10%. You can change the factor to whatever you like and you can even have some static values in there like:

  • body.scrollTop > body.clientHeight + 100 when we scrolled more than one screen with 100 pixels
  • body.scrollTop > 200 when we scrolled 200 pixels from the top

Function initBTT does the magic. When the document is loaded (see the last lines), this function is called and a DIV with A inside, the back to top button, is added to the document. If you want some text inside the button just uncomment the line

//btt.firstChild.innerHTML = "Back to top";

And now let’s see how we can cutomize the layout – btt.css.

#btt {
	background: #eeeeee url(btt.png) center center no-repeat;
	width: 66px;
	height: 54px;
	top: 200px;
	left: 80%;

	opacity: 0.9;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
		
	border:2px solid #eeeeee;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);

	position: fixed;
	_position: absolute;
	_top: expression(((document.documentElement && document.documentElement.scrollTop 
		? document.documentElement.scrollTop :  document.body.scrollTop) + 200) + 'px' );
}

There are some hacks that you have to read first about CSS fixed position and opacity.
Besides the implementation details, with the CSS fixed position, we can configure here various aspects of the button: background, size, position on screen, opacity, border etc. If you want to configure the text on the button, if any, you should use #btt A as the CSS selector.

And finally, the demo.

Categories: Web Tags:
  1. No comments yet.
  1. November 11, 2010 at 1:35 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: