skip navigation

Anchors are great navigation tool

By Loren Nelson, 04/27/16, 5:30AM CDT

Share

Help viewers navigate text blocks on a page with top-to-bottom links

Because anchors typically aren’t used frequently, or at all, they can be surrounded by an air of uncertainty. What are they? Where should I use them? How do they work?

Most often, anchors are used on a site’s Frequently Asked Questions page. The setup of those pages usually consists of a list of questions at the top and the list of answers lumped beneath. The questions and answers sometimes stretch on and on and on. Anchors, which are a type of link, allow viewers to click on a specific question and be whisked down the page to the answer.

While that’s the most common use for anchors, they should be considered for use on any page that has an abundance of information organized in multiple sections. Rich Boretz, who recently was featured as a Webmaster of the Week for his work with the Central Jersey Volleyball Academy, deftly uses anchors on his Registrations page. 

The list of camps is divided into blocks of weeks that show which camps are offered on which days. The name of each camp is linked to a full description and registration button below. A great example of how to use anchors in a somewhat unconventional way.


Examples of pages with anchors

HOW IT WORKS

A look at how to link to specific areas in a text block using anchors:

  1. Set the name and location of your anchor
  2. Create the link to your anchor
  3. Adding anchors that span multiple text blocks

Set the name and location of your anchor

Log in with your Sport Ngin account. Toggle into Edit Mode. Scroll down the page to the location where you want to set the anchor. This will be the portion of the text that viewers are sent to from above. Note: The location and look of the Edit switch varies depending on the Sitebuilder template.

Create the link to your anchor

At the top of the page, copy the text you want to set as a link to its corresponding anchor below. Select the link icon in the text editor menu panel. In the Link Type dropdown, select "Link to anchor in text." The choose the anchor name in the By Anchor Name dropdown. Click the OK button at the bottom of the window. Now, when viewers click on questions at the top of the page, they are driven to the full Q and A at the bottom of the page.

Adding anchors that span multiple text blocks

The anchor functionality works as described above when all of the text is placed in the same text block. Anchor links can work when the elements are in separate text blocks, too. This just requires adding the anchor coding manually by clicking the Source button in the text editor. In the example to the right, the <a href="#1920s">1920s</a> is the link code. The corresponding anchor source code is <a name="#1920s">1926-27</a>. 

Loren Nelson Headshot

About Loren Nelson

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts