jQuery UP! Reading becomes cool !

jQuery UP! comes as a jQuery plugin. It was designed for non-coding webdesigners who wants cool user-friendly stuff on their websites without loosing hair implementating it.

Wether you got a looong boring page or an insteresting article about quantics, UP! will help your readers not to sink in the weight of the words, introducing a way to reach the top of the page whenever they want to.

How to

It’s just as simple as its name. Just call jQuery, and then call UP! You wanted more ? Hope you’re not upset.

Ok, there’s an illustrated example right above this line :

						
<!DOCTYPE html>
<html>
	<head>
		<title>jQuery UP ! Or whatever you want, in fact
		<script type="text/javascript" src="jquery-1.3.2.min.js">
		<script type="text/javascript" src="jquery.up.js">
	</head>

UP! comes with some additional options too.

You’ll have to edit the jquery.up.js file in a textmate-like application (notepad is good at it too). Search for this snippet :


//Launch me UP !
$j(function(){
	$j(document).up({
		fontFace: "Helvetica, Arial, sans-serif",
		fontColor: "#fff",
		bgColor: "#333",
		angles: false,
		shadows: true,
		shadowColor: "#000",
		text: "UP!",
		altText: "Get back to the top of the page",
		fontSize: "18px"
	});
});

Most of the options are written in CSS style.
I think you understood wich options are here for, but in the case you didn’t :

fontFace : The font(s) you want UP to display
fontColor : The color of the font
bgColor : The colour of the sticker
angles : Rounded angles or not (true/false) for the sticker
shadows : True or false if you want shadows or not below the text
shadowColor : The color of the text-shadow
text : The text displayed on the sticker
altText : The alternative text (will get in the title attribute)
fontSize : The size of the font

Demo

If you got a normal screen, you won’t have to search much longer, just look right.

UP! is a little sticker, partially transparent, and is displayed when you reach more than 50% of the page height with the scrollbar.
You have some choices when you call it with the options, but you can still use CSS to customize it and make your own UP!

Download

jquery.up.js (uncompressed version - 3kb) : download

jQuery framework (necessary) : jQuery website

Contact

jQuery UP! is part of the Hexagon plugin pack.
Feel free to contact me via my website : http://www.mathieuartu.net
Thanks to Hervé Gouchet for the late cleaning of the code.