Breaking News
Home » Digital » The Internet » Coding and Customization » How to Create Anchors with Different Starting Positions Using CSS
Tutorials, Tips & Tricks

How to Create Anchors with Different Starting Positions Using CSS

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 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!)

↓ Jump to Final Code: HTML | CSS


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.

Anchors - Before CSS Class

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.
Anchors - After CSS Class

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.

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.

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.

If your linking to anchor text on another webpage, use this code.

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.)

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 &nbsp; 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.

WordPress Text HTML Editor in Posts


CSS: Cut and Paste Code

Within your CSS filepaste 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 ( 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

WordPress Editor Edit Themes

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge