Creating anchors is a usability feature that helps website readers navigate to certain locations within a webpage. Click here for a demo anchor.
A big thanks to Mark from StackOverflow.com for this simple solution.
(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)
Take a look at the images below to see the difference between the original anchor and the anchor modified with CSS code. (Hint: Notice the difference in spacing above the text, at the top of the page.)
Before CSS was Added
The text that appears after the anchor link is clicked is VERY close to the top of the page, a little too close in our opinion. Even though this example shows the full text, it is not uncommon for the upper part of the anchor area to be off the page (too high). This is what we are trying to avoid by applying a CSS class style.
After CSS is Added
You’ll notice the white space above the section that has the anchor. Actually the anchor is added BEFORE the element being linked to to avoid conflicts with Heading Tags and other elements.
Final Code Snippets
Example: The Digital Hippies (this Page)
The following code is what appears within this post’s HTML to create an anchor. This is how the link at the top of the page ‘Click here for a demo anchor’ was created. There is also an anchor location as well for the next snippet to call upon.
<a href="#demo">Click here for a demo anchor</a>. <span class="anchor" id="post-top"> </span>
It links to the section that says “This is an example of an anchor”. You’ll notice there is another (anchor) hyperlink that sends you back to the top of the post.
<span class="anchor" id="demo"> </span>
This is an example of an anchor, <a href="#post-top">click here to go back to the top of the post</a>.
Continue reading to learn where to place the code.
HTML: Cut and Paste Code
Within the HTML editor, paste the following code where you want your anchor. Since HTML 4.01 it is acceptable to use the <a> tag to define an anchor, in addition to using it for the traditional hyperlink. When using anchors it’s best to use ‘id’ versus ‘name’. Here’s a brief description why.
Place the following code around your anchor text to jump to the anchor point within the page.
<a href="#my-anchor-name" title="Anchor Link Text">Anchor Link Text</a>
If your linking to anchor text on another webpage, use this code.
<a href="http://website.com/page#my-anchor-name" title="Anchor Link Text">Anchor Link Text</a>
Place your anchor code where you wish the page to jump to when the anchor link is clicked. (Tip: It’s best to place this directly above the element you wish to appear at the top of the page.)
<span class="anchor" id="my-anchor-name"> </span>
We chose to use the <span> entity to avoid styling conflicts with using the <a> entity. Conflicts using the tag included a floating underline, caused by my browser thinking it was a link.
You’ll also notice that a space needs to be hard coded within the HTML to help cross browser compatibility.
This is an example of an anchor, click here to go back to the top of the post.
WordPress Users: This is available on the ‘add/edit post’ page. In the upper right corner of the ‘Visual’ editor, there is a ‘Text’ option. This displays the HTML editor. Normally WordPress displays the ‘Visual’ editor, but you can switch to an HTML editor with the ‘Text’ option.
CSS: Cut and Paste Code
Within your CSS file, paste the following code:
WordPress Users: It’s best to use the custom CSS field if your theme provides one. If your theme does not have this option, then you can navigate to the Theme Editor (http://YourWebsite.com/wp-admin/theme-editor.php). Be sure to add any custom CSS code to the very end of this document. Do not mess with any other code or you might cause errors with your theme.
By default the Stylesheet (style.css) should appear.
Appearance > Editor