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