How to Make a Scrolling Back to Top Link in WordPress

So you have a site that has lots of long pages or posts. What do your users do when they get to the bottom? Here’s a bit of code that will allow you to make an autoscroll link back to the top of your page.

By Nathan Ingram   |  July 14, 2012

So you have a site that has lots of long pages or posts. What do your users do when they get to the bottom? Scroll back to the top with the scroll bar or maybe their mouse wheel? Psh. How 2004! Here’s a bit of code that will allow you to make an autoscroll link back to the top of your page like you see implemented on this site.

There is also an article on this concept in the iThemes Builder Community with slightly different code. I added a few tweaks of my own…

The jQuery Code

<script type="text/javascript">// <![CDATA[
jQuery('.backtotop').click(function(){jQuery('html, body').animate({scrollTop:0}, 'slow');
});
// ]]></script>

Basically what this code does is tell anything that has the backtotop class (line 2) to become a clickable link that scrolls the page to the top with a nifty animation (line 3).

This code goes just before the </body> tag in your theme files. Or, if you’re using the awesomeness that is iThemes Builder, you can just paste it in the box on the setting page like so:

The HTML Link

Now all you have to do is add the following div that has the class backtotop as mentioned above wherever you want people to click.

<a class="backtotop" href="javascript:void(0)">Back to Top</a>

What we’re doing here is creating a link that goes nowhere and giving it the backtotop class so that it gets the jQuery effect applied to it.

The Result

Back to Top

Adding the Link to Every Page

Unless you’re using the magic of LoopBuddy (keep reading),you’ll have to add the link to your template files. Edit your page.php (or single.php for posts) and add the HTML code above to just after the php the_content area. You’ll need to tweak this depending on your theme. You can also tweak the HTML to your heart’s delight as well.

Adding the Link to Every Page with LoopBuddy

If you’re not using Builder, you’re probably not using LoopBuddy either, which is probably one of the sweetest tools to come along in a while for WordPress developers. If you don’t know about LoopBuddy, go here.

With LoopBuddy, we can create a layout that includes our Back To Top link from above and apply it to every page (and post if you want) automatically.

Step One: Create a LoopBuddy Layout for a Default Page

In the graphic below, I created a layout called “Page Default” which contains just the title and content. Those are there by default. Then I simply added the HTML code from above into the Post-Loop / HTML box. That will cause the HTML code to show up at the bottom of any page or post we apply this layout to.

Step Two: Apply the Layout to Pages by Default

Now we want to tell LoopBuddy to use that Default Page layout as (you guessed it) the default Page layout for our site. We do this in the settings area in a simple pick list:

Once you save the settings, your site should begin to display theBack to Toplink at the bottom of each page.

Repeat the LoopBuddy process to have it display onĀ  your posts as well (you’ll have to do this separately unless you just want Title and Content for your posts).

Related posts:

Leave a Reply