Add “Back to Top” link to your Blog Footer

Sometimes we create a very appealing blog and ignore on some basic features. One of the features is “Back to Top” on your blog’s footer.  Blogs have a tendency to create huge scroll bars, whether that scroll bar is long because you dont use the more tag to cut down your posts, or you get a lot of blog comments, the matter of fact is, if you have huge scroll bar and no easy way to get back to the top, it will annoy the blog reader.

This is something so simple, when a user gets to bottom of the page and sees the link,  they click on the link or the image and they go to the very top of the page. This awesome feature is really very easy to create and very effective to your blog.

There are many way to add this feature in your blog, one of the easiest way is to use the plugin to do the job.  And if you don’t trust the plugin and have a basic knowledge of HTML and Javascript you have this tutorial as a back stand for your own blog.

Do check some of our hot Tutorials:

• Learn How to Install WordPress In Your Personal Computer.
• 7 Most Essential Setting not to Ignored For A Newly Installed WordPress Blog.
• 11 Commonly Used WordPress Plugins
• 8 Tips to Make Your Blog More Printable

If you are looking to add it manually, I found one awesome article on the net which you might be interested.

• A Short Story About “Back To Top” links from SmashingMagazine.com.

Just use this code and add it to your footer somewhere:

<a href="#header">Back to top</a>

If you like the Back to Top feature in this blog and want to implement  in your blog you can use the below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<a class="top"></a>
<script type="text/javascript">$(function() {
$('a.top').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>

For Thesis Theme users you can use the above code  by creating a function in your custom_functions.php file. I have add a sample thesis function for your reference.

function back_to_top() { ?>

<div id="footer">
YOUR FOOTER CODE AND BACK TO TOP CODE HERE...!
</div>

<?php
}
add_action('thesis_hook_footer', 'back_to_top');
remove_action('thesis_hook_footer', 'thesis_attribution');

Check our other awesome articles on Thesis theme:

• 8 Best And My Favorite Free Thesis Theme Skins For WordPress
• How To Add Social Bookmarking Badges Below Teasers Title in Thesis Theme.
• Great Pens A New WordPress Plugins By FamousBloggers.net

It is very easy, simple and yet power feature, when the link gets clicked it automatically shoots to the top of the page.

Do share your thoughts and experience on using “Back To Top” feature and what method are your using in your blog.  If your like this tutorial do share with your friends and don’t forget Tweet and Stumble.

Happy Blogging !!!

Tagged as: back to top, blog, google, thesis, thesis theme, wordpress

Tweet

View all posts by Imran Shariff
Blog → Visit Author's Blog

Follow Us On

Article by Imran Shariff

Imran Shariff is a Full-time blogger, web designer and the man behind this blog who is working very hard to keep the quality. The only aim of starting this blog is to share all the knowledge and information by experimenting on various platform.

Imran has written 67 awesome articles for Shariffdotorg