How to Add Back to Top Button in Thesis Blog

In this video tutorial I am going to explain about how to add back to top button in thesis theme. If you have a post with more than 100 comments, now a reader wants to add comment to your post after entering the comment again he wants to see the post. Here he need to scroll the mouse to long time to reach the post.

To avoid this problem I am giving a solution called floating ‘back to top’ button. This button will help you to reach top in a single click. This go to top button is floating type so it is always available in near the side scroll bar of your website.

You can place this button bottom of the screen or middle of the screen. If you are reading at middle of the page you can go to top straight a way by clicking the back to top button.

To add Back to top button to your website follow these steps.

  • First you need to create a 30×30 image file for the button.
  • Upload this image file into custom images folder of thesis theme by using ftp. The path of the custom folder is public_html/fourbloggr.com/wp-contet/themes/thesis_16/custom/images.
  • Once uploaded the image login your wordpress admin dashboard.
  • Select ‘thesis options’ under thesis options in left sidebar of the wordpress dashboard.
  • Select ‘header scripts’ under ‘stats software and scripts section’.
  • Paste the following javascript code in the header script box.
/* paste the code in header scripts*/
<a style="display:scroll;position:fixed;bottom:5px;right:5px;

" href="#" title="Go to Top">

<img src="http://fourblogger.com/wp-content/themes/thesis_16/

custom/images/fourbloggertop.jpg" /></a> <br/>

The above code you should replace your image uploaded path. Here you can also change the position of the button by changing the bottom and right values.

  • Then enter ‘big ass to save button’. Now check your site with back to top button like below image.
back to top

back to top

Top to Bottom link

You can also add top to bottom button like I used in this site. This website if you click ‘video blogging tutorial’ banner in header directly it comes to our video player available in the footer. This player you can watch al the videos of ‘fourblogger.com’.

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 3 comments… add one }

Leave a Comment

  • Tanmoy January 30, 2010, 5:24 PM

    I prefer link instead of using an image.

    **New interface of your website is now looking smooth.

    Reply
  • Avi D March 24, 2010, 4:22 PM

    How would you do this without a header script? I don’t like depending on my user’s implementation of Javascript…

    Reply
    • Suresh March 26, 2010, 3:15 PM

      hai avi D,
      the code mentioned in the post is not a java script.. it is php code.. you can also add this code by using corresponding thesis hook (thesis_hook_footer).. create a function for this code and place this function code in particular place of thesis theme using the hooks..

      Reply