Top




jump to top of page

How To Jump Or Link To Top Of Page HTML

In the last article I showed you how to jump or link to a specific text location within a blog post or a page. In this article I would like to show you a simple technique you can implement. if you want your readers jump to top of page or a post, or for that matter how to return to any spot within the text of your page.

To jump to top of a page or to another spot within the post is important when the post is very long and there may be a specific call to action, table of contents, or specific links that your visitors would benefit from upon returning to the top of a page or a section of your post.

Often accessing this information may be neglected when a visitor has to do a lot of scrolling while reading your article. So in a sense, if you do not implement this simple technique, when necessary, you and your visitor may be losing out.

2 “Jump To Top Of Page” Methods

There are two different ways to create links within the text that will allow your readers to jump to top of page or to a specific part of a page.


1. The first way is typically used when you want your readers to return to the very top of your page, basically to the title of the page.

  • Open up your  HTML editor (“Text” in WordPress editor)
  • Scroll to the bottom of your page
  • add <a href=”#”>Back To Top</a> after the last paragraph of your article

You can change, “Back To Top” with a command of your choice

The addition of this link to the bottom of your page will create an instant visual link Back To Top

If you click on this link you will return to the beginning of this post. (Try it…)


2. Sometimes you do not want readers to jump to top of page where you show your title and possibly a featured image. You may want them return to a certain area of the article. To do that, the commands are slightly different. (For a much more detailed explanation than shown below you may want to go to how to jump to a specific portion of a text.)

In this case you have to create the command link and an anchor link.

You may set the command link on the bottom of the post or anywhere within the post. The anchor link, you will place where you want the reader to return.

The following are the two links you will have to create:

  1. command link: <a href=”#top”>Back To Section 2</a>
  2. anchor link: <a name=”top”></a>

In the command link, the phrase “Back To Way 2” will become a link. When your readers will click on it they will return to which ever spot you “anchored” with the anchor link.

In this example, I will place the anchor above the section 2  and the command link at the end of this sentence: Back To Section 2 . Go ahead and test the link.

But what to do when you have more than one areas you want the reader to return to?

Suppose you have several different areas you want your readers to return to. If you would use the word “top” for each one, the system could not work because it could not understand which “top” you meant.

In this case you will replace the word “top” with another word, as long as the name is the same in the command link and the anchor link.

Let’s create two commands. One will lead the reader to section 1 and other will lead the leader to section 2.

  1.  Return to section 1:
    command link: <a href=”#Section 1″>Back To Section 1</a>
    anchor link: <a name=”Section 1″></a>I’ll place the anchor link just above Section 1 (in the text – HTML editor) and the command link at the end of this sentence (also in the text editor) Back To Section 1
  2. Return to section 2:
    command link: <a href=”#Section 2″>Back To Section 1</a>
    anchor link: <a name=”Section 2″></a>This time I’ll place the anchor link just above Section 2 (in the text – HTML editor) and the command link at the end of this sentence (also in the text editor) Back To Section 2

As you can see it is pretty simple to direct your readers to jump top of page or link to the top or another section of a text inside your post. If you want the reader to move forward, for example as in the FAQ (Frequently Asked Questions), it is also easy to do. I  wrote a an article about that type of linking as well. You can read it here…

If you found the article interesting, please click “Like” or Google+ , it lets me know that writing these articles for you is worthwhile. And. don’t forget to leave a comment.

 

millionaire's brain ad

 

, , , , ,

2 Responses to How To Jump Or Link To Top Of Page HTML

  1. Rohit Sharma April 9, 2014 at 3:23 pm #

    Hello Dita,
    I am also trying to develop static html templates and website using the bootstrap framework. But this trick just helped to learn a lot. Now I will put this on every template I created.
    Thank you for sharing this.
    Rohit Sharma recently posted…Basic Needs to Make a Better Blog or Website.My Profile