Add a "Go To Top" button to your store

Some of the stores that I see around Printfection have a big long display of some wonderful designs. Problem is, once your shopper has gone all the way to the bottom of the page, they then have to scroll all the way back to the top to get to the menu, which is somewhat frustrating and annoying. There is a really simple way to deal with this by adding an internal link at the bottom of the page. You can achieve this by placing the following HTML somewhere on on your Base HTML page, preferably towards the bottom.


<a id="btnScroll" href="#logo" />Top of Page</a>

That will give you a simple text link that will return to the top of the page (#logo) immediately when it is clicked. You may prefer something a little more gentle however, where when clicked, the page will scroll back up to that same point. in that case, you can add the following to your base HTML to go with the link above:


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript">  </script>
<script type="text/javascript" src="http://www.australele.com/usw/js/scrollTo.js"></script>
	<script type="text/javascript">
                var scrollPoint = "#logo";
                var scrollSpeed = 3000;
	</script>
<script type="text/javascript" src="http://www.australele.com/usw/js/scrollTop.js"></script>

In this case, the scrollPoint variable is the point in your page that you want to scroll to and scrollSpeed is how many milliseconds it will take to scroll. The bigger the number, the slower the scroll. If for some reason, javascript is diabled, the link will just jump to the desired point. You can see this in action at Ukulele Shirt World. Scroll to the bottom and the click on the "Top" link.

Of course, you can style the link any way you like by setting some CSS attributes for it in your custom CSS:


#btnScroll {attribute: value}

Enjoy !

 

28.12.2007. 21:26

This article hasn't been commented yet.