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.

The anchor tag 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.

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!

Typepad Services badge