How to Create “Back to Top” on a Page


Emmeline Freda du Faur climbing Mount Cook in New ZealandThis tutorial will help you create a “Back to Top” link on a page in two easy steps, using named anchors.  (Don’t worry, it’s not that difficult.  If Emmeline du Faur could scale Mount Cook in New Zealand, you can do this!) You’ll be able to “jump” from linked text at the bottom of a web page to return to the top of the page. Hopefully, your blogging platform allows you to write HTML when you need to.

You can see a “Back to Top” feature on Our Blogrolls page.  The A to Z list on the page is a more complex version of the same type of code, which uses anchors or bookmarks.  (I explain how to code an A to Z list here.)

Step One: Make sure you are on the HTML version of your post and type this anchor code at the very beginning of  your blog.

<a name=”top”></a>

Step Two: Type this code at the bottom of the page:

<a href=”#top”>BACK TO TOP</a>

That’s all there is to it!

You’ll notice, only the words, “BACK TO TOP” show up for your reader.  All the instructions are invisible to them.  Click the  “Back to Top” link at the bottom of this post to see how it works.  If you were able to follow my directions on your post, this will look and function exactly like I have it working here.

You can also use this same coding concept for other reasons to have links within a page.

BACK TO TOP

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s