Codeable info

Adding A “Back to Top” Dynamic Link for Quick Navigation

Posted on by in WordPress Tutorials

WordPress enabled blogs and websites can become quite crowded and lengthy, especially if the admin has configured the blog to display more than ten recent posts. If a reader were to scroll down through the entire front page (or any lengthy blog page) and reach the bottom, they would subsequently have to scroll all the way back up to the top of the page. This wastes quite a bit of time.

The best way to return readers to the top of the page is by adding a dynamic link that transports them quickly. This allows them to continue reading further posts or navigate to other areas of your site without the frustratingly slow scroll times.

The code to implement such a link is simple and involves editing your active WordPress theme’s “header.php” file. Since this is a main source file make sure you do a complete backup before you start, just in case something goes awry.

Open the root directory of your blog using your preferred editing method and navigate to the “wp-contentthemes” directory and then choose the theme you are currently using on your WordPress blog or site.

After doing so, open the “header.php” file and look for the closing head tag and opening body tag which should look something like this:

</head>
<body>

After you have found both tags above you must paste the following bit of code directly after the opening body tag. Sometimes the body tag has additional parameters and extra commands within the bracket, if that is the case just make sure you add the following code AFTER the closing bracket of the body tag:

<a name="top"></a>

So basically after pasting the above code, the final product should look something like this:

</head>
<body><a name="top"></a>

After that step has been done you may save your “header.php” file and move on. But now you must decide where you would like to place the link, in this case the link to return to the top of the page would probably do best all the way on the bottom of every page. If that is the case then you should add the link into your “footer.php” file, however you are free to add it anywhere you wish.

The link should be pasted exactly as it it seen here:

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

The "Back To Top" LinkThat’s it! After you’ve pasted the above link where you want the dynamic link to appear you can save your edited file and navigate around your page to your heart’s content!

)
Codeable info

Comments (3)

Comment by mark taylor says:

It would be really good to turn the link into a button, how would i do that?

Comment by Aaron Summers says:

Brilliant and simple, I will be using this in my projects.

i thought i would add a small improvement you could include a class to the footer and style the text or even add a img src=”htt p://” class=”” and use an image for the link!

I have a nice css image rollover and preloader tutorial on my blog that works with this nicely.
this is the link

http://asummersdesign.com/blog/2011/03/add-custom-interactive-images-to-wordpress/

nice work though.

Comment by Laurent Holdrinet says:

Quick and useful tip, thank you!

Codeable info