If you are a WordPress user and most likely WordPress lover like me, you are more than likely aware that implementing a scroll-to-top link on your site is just as easy as pie. Just go to the plugin section of your WordPress back end, choose one of the many plugins available (Asvin Balloo’s wp-to-top is a very good one for example), activate it and customize the link, color and background color.

 

I was tempted to do this myself, just sit back, relax and click a few times to get this done. But I decided to go the longer way as it would be nice:

 

1. to inform people wanting to implement this on any website, and not only on WordPress
2. to have this feature customized so the scroll-to feature displays a dynamic and personalized icon instead of a simple link
3. to have this customized without having to go into the plugin editor and mess things up, especially if you have gone WordPress multisite like me.
4. to have this scroll-to-top feature available on a selected number of pages, and not on any post (or all site pages) as most plugins will give you the possibility.

 

Bearing in mind there is no need to reinvent the wheel, let’s Google a scroll-to-top jQuery plugin, and yes: you will find tons. I decided to go with Matt Varone’s plugin set (details here) and can only encourage you to go check it out and leave a kind message to this talented designer.

 

So here we go with the coding.

 

As Matt brilliantly explains it, you will be needing the jQuery plugin library as usual, his jquery.ui.totop.js script, some css to have the icon showing up, and a double-sided icon (or sprite as Matt calls it), with hover and no-hover states which will give your icon a dynamic and funky effect.

The CSS code

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:-999px;
	background:url(../img/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(../img/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

As you can see, we have an icon set to 51px wide and 2x51px high, and two positions for our hover/no-hover states, with a left top positioning of our background image for the no-hover state and a left -51px positioning of the image for our hover state. This will technically shift the image along its y-axis and create a dynamic effect to it.

Personalize your icon

Obviously, you can choose to apply one (or more) effect(s) to a simple arrow icon if you decide not to go over the top with this. I went with Shoogle, my beloved fishy icon, with a black and white effect on the no-hover side of the pic and a colorful and thumb-up picture for the hover state.

 

 

OK this is it people. Click on the demo, scroll down the page to make the icon appear and don’t forget to hover over it with your mouse to flick between hover and no-hover states. Finally click on it and make the plugin take you back to the top. Download files here.

Happy plugin implementation!

§ One Response to Create a personalized scroll-to-top icon

• Michael Pehl says:

  September 15, 2010 at 9:14 pm

  Really nice, mate… I did RT it

  Reply