How to Add A Sliding Scroll To Top Footer To WordPress Using Thesis Theme

by Token Health on November 9, 2011 in Thesis

If you are running a WordPress blog using the Thesis theme you may be interested in adding a nice feature to your blog which allows your site visitors to sail up to the top of your site once they get to the bottom in the footer. This can be a useful feature if your blog is receives a heavy amount of traffic and you regularly receive a lot of comments on your blog posts.  If you don’t add some sort of feature in your footer to help your website visitors get back up to the top of your site easily, then they will have to spend extra energy scrolling up the browser or using their keyboard or using a scroll wheel. This is no fun for website visitors so I recommend adding a scroll to top feature if your blog’s footer.

I personally like the feature known as the sliding footer. It has been implemented on this blog in the bottom right of the footer. I have seen it implemented on other blogs such as http://www.blogussion.com/ and http://www.shoutmeloud.com/ as well.

The way I have implemented it is using an image that I create with Adobe Photoshop and then adding some code to my custom_functions.php and custom.css files.

So first open up Adobe Photoshop (or a similar type of program) and create your arrow image.

In Adobe Photoshop I go to File > New and then enter in the width and height for the image. You can experiment here but I would try something like a width of 60 and a height of 80 as a start.

Then you should add in your arrow. In aAdobe Photoshop in the left hand pane you will see the ability to select the custom shape tool.

After doing so in the top of the screen near the middle, select the shape of an arrow.

Then go ahead and draw the arrow in your white box that was created. Then go to Edit > Transform Path > Rotate 90 degrees CCW

Then go ahead and move your arrow slight up if necessary. Then add some text below such as ‘Go to Top’. You should produce something like this

Then after doing this you can of course play around with the font and font size. Further you can redraw the arrow if you don’t like the exact size and shape. You can also change the color and add some other blending affects. I personally like the Bevel and Emboss option. To access this right click on Shape 1 that was created in your layers panel in the bottom right of Photoshop.

Then select and click on Blending Options. A new window will appear. Then click in the box next to Bevel and Emboss. Then click OK.

After you have done this you should produce an arrow somewhat like this.

Now you are ready to use this arrow in your Thesis them in WordPress.

Add the following code to custom_functions.php

function sliding_footer () {
?>
<div id="backtotop"><a class="top"><img src="http://www.mydomain.com/images/myarrow.jpg"></a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {

       $('a.top').click(function() {
           $('body,html').animate({scrollTop:0},700);
       });
});
</script>

<?php
}
add_action('thesis_hook_footer', 'sliding_footer');

Where  http://www.mydomain.com/images/myarrow.jpg refers to the arrow you created in Adobe Photoshop or other similar software.

Then add the following code to your custom.css file

#backtotop {
	float:right;
	margin: -11em +2.8em 0;
	cursor:pointer;
	width:60px;
}

Of course you you can play around with the margin to place the arrow where you like and where it may work best in your theme. Now try out your new sliding to top arrow feature in your footer and make sure it works properly on your website. Your website visitors will thank you for adding such a nifty feature I am sure.

The end result in your Thesis theme should look something like this.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

  • Alternative Media
  • Blogging
  • Companies
  • Finance
  • Health
  • Other Bloggers
  • SEO
  • Thesis
  • Viral Videos