Inserting Anchor Links

Ever wonder how you can click on a link at the top of a web page and it brings you right down to the part of the page you wanted to get to without having to scroll? This is done by using anchor links. Anchor links are clickable elements on a page that directs users to a specific spot on the same page, or even a different page altogether. When we think of links within a webpage, we often think of them as simply directing from one page to another, however, that isn’t always the case. We can use them to link to a specific section of the same page.

The simplest way to showcase this is by clicking here. As you can see, this directs the user to a specific link, but it additionally jumps down to specific a part of a page, in this case, the case studies section.

How It Works

The Destination (ID)

To get an anchor link to work, you first need to establish its destination, or where the link will point to. To achieve this, we need to add an ID, or identifier that is unique to a page. For example, adding an identifier to a paragraph within the HTML would look something like this:

<p id=“anchor-destination”>Some paragraph text</p>

Putting the destination (ID) generally works well on any element of a page. The important thing to know is that each page cannot have IDs with the same name, but a page can have multiple links that point to the single instance of that ID.

If there is a fixed header on your website (the top of the page that always follows you whenever you scroll), instead of putting the destination around an existing element, we will need to roll up our sleeves and add in some HTML right above the element that we would like to link to.

A quick example would be something like this:

<div class=“anchor” id=“anchor-destination”></div>

<-- Element that you wanted anchored -->

There are a few reasons why we approach it this way. First, we need to add a specific class to the anchor link to offset the fixed header. By default, the browser will have the anchor at the very top of the viewport. Since the fixed header will take around 100px of the viewport’s height, the anchor will then be hidden by the header.

Lastly, to remedy this problem, we use CSS to relative position the anchor to make up for that space. The trick is that we leave the anchor empty, since there would be a very large and awkward gap if we were to put that anchor destination around actual content.

The Link

Once you establish the destination, you will want to make a link that points to the destination. It is just a matter of adding in a link like you normally would, but instead of pointing to a specific page, you would enter the following syntax:

<a href=“#anchor-destination”>Some link text</a>

Normally, Sitefinity won’t let you enter an invalid URL (any URL that doesn’t begin with http:// or https://), but to bypass this, you can use the HTML editing mode to put the link in manually.

Alternatively, if you are using Sitefinity’s MVC framework, you could use the anchor link feature that is included in Sitefinity’s link manager. This works very well, but with one major drawback: it only works if the anchor destination is in the same content block as the anchor link.

This might not always be the case, so your option would be using the tried-and-true HTML method.

Another quick note is that this functionality is not restricted to one page. You can use this same method to link to other pages that contain anchor destinations. The only difference is including the other page’s URL and adding the anchor link like:

<a href=“another-page-url/#anchor-destination”>Some Link Text</a>

If you’d like to learn more about anchor links or utilizing the MVC framework, please contact your Client Service or Project Manager at Vanguard.