May 29, 2012

Add Anchor Tags To Jump To Specific Location On A Page

By including an anchor tag within a post or page, you can place links in the body of your post which when clicked allow the reader to jump to another location on the page.

Using the Typepad Rich Text Editor

With the Rich Text editor, you can place anchors in your posts. If you prefer to use HTML to code the anchor tags, click to the Anchor Tag Code section.

First, you will need to place the anchor. In the Rich Text editor, place the cursor in the post where you wish to drop the anchor, open the Insert menu, and click Anchor. You will prompted to name the anchor. This should be something simple. For example, if you want to place a link to jump back to the top of the page, you could name the anchor "top".

Anchor Name

Next, you will place your cursor where you want the reader to be able to jump and click Insert Link to create your link. Any anchors you have created in the post will be available to select from the Anchors menu. Once selected, the other fields for the link will be completed. Click Insert Link and the link to the anchor will be inserted into the post.

Link to Anchor

You can link to the same anchor in multiple locations throughout the post or page.

Anchor Tag Code

The anchor tag code will consist of two HTML elements. First, you'll want to create the link.

If you are linking to a spot on the same page, the format of the link will be similar to:
<a href="#anchor">Link Text</a>

For example, if the text is "Read more about raptors!" then your HTML should look like this:

<a href="#raptors">Read more about raptors!</a>

The above anchor link only works when you are jumping to a specified spot on the same webpage. If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the page, similar to:
<a href="http://example.typepad.com/blog/2012/05/filename.html#anchor">Link Text</a>

When composing your post or page, click the HTML tab in the toolbar and enter the link code.


(click to view full size)

The second part of an anchor tag is the actual anchor. The anchor should be placed at the beginning of the line where you want to start reading after you jump similar to:
<a name="anchor"></a>

Following our previous example, the anchor code will be:

<a name="raptors"></a>

When composing your post or page, click the HTML tab in the toolbar and enter the anchor code at the beginning of the line where you want to jump.

If you want to have the link use an image, switch out the text in the link with the code for an embedded image, like this:

<a href="#raptors"><img src="http://example.typepad.com/raptors.gif" /></a>

You can upload images to Library > File Manager. Click on the file's name after it's uploaded to grab the URL for the file.

Updated 01 November 2016

Not quite what you are looking for? Check out these other articles:

  • For information on the features of the compose editor, see the article on the Rich Text toolbar.
  • Tips for improving SEO are available in the SEO Overview article.
  • To create a custom, responsive design, you can use the Design Lab and choose for dozens of fonts for posts and pages.
Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services