This tutorial will help you create a “Back to Top” link on a page, using named anchors. Don’t worry, it’s not that difficult. 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 paste this anchor code at the very beginning of your blog.
<a name=”top”></a>
Step Two: Paste this code at the bottom of the page:
<a href=”#top”>BACK TO TOP</a>
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. This post isn’t very long, so to make it more obvious, scroll down on the page so “BACK TO TOP” is the first line you see before you click on the link.
You can also use this same coding concept for other reasons to have links within a page.
For instance, I used anchors for a report I did several years ago. The outline of the report appears as you first bring up the page. If you click on different parts of the outline, the link takes you to that part of the report so you skip over the content and get to what interests you.
Recently, I used anchors to go to specific links when writing my post for the eZ Dictionary. For instance, the site I used for the definition of Malware was cluttered with multiple definitions for the word. I picked the definition I liked best and because they had bookmarked each definition I was able to link only to that definition and not confuse someone with the whole page of options.
Filed under: blogging, eHelp, eZ tips, HTML, Websites Tagged: blogs, HTML, hyperlinks, Websites
