Anchor Links

Sometimes pages on websites have lots of content on one page. You will first want to consider splitting up that content into multiple pages and then hyperlinking each page from an overview page. However, sometimes that is not the case and you want a lot of content on a single page. To make it easier to digest, you can setup an index of anchor links at the top of the page paired with linked headings for each section.

 

What's the best way to put lots of content on a webpage?

Generally, it's a best practice to split the content up into more manageable pages on a specific subtopic and to then make an index page that hyperlinks the other internal pages within the same folder. Many websites for example have a Constituent Services folder. Within that folder are pages for each specific service that the office can assist with, like federal grants or the congressional app competition. The main page for that folder contains an overview of all of the services with links to each separate page. This helps keep content discrete and organized easily.

Creating section headings

As you're writing content on a lengthy page, you want to break up the content with different headings. The best way to achieve this is to use a heading element. Headings have different levels from 1-6. Generally the top of the page is a Heading 1, and then each level below that goes down by one. To add a heading to some text, highlight the text you'd like to become a heading and then select the heading type in the dropdown to the left of font size.

Once you have your content broken up into sections with appropriate headings, you need to hyperlink those headings.

Hyperlink section headings

1. Highlight the section heading

2. Select the hyperlink manager icon in the toolbar to open the Hyperlink Manager

3. In the Hyperlink manager click the Anchor tab at the top
4. Add a single word name and id that are identical. It can't have spaces. For example if your heading is named "Federal Resources" then you might type federal into both the name and ID fields.
5. Click ok when done
6. Now you've successfully created an anchor link on the page
7. Repeat for each heading that you'd like to link to 

   Create an index of anchor links at the top

   1. At the top of the page, create a list of the different headings that you've created and want to link.

   2. Highlight each section heading that you'd like to link and then click the hyperlink button to open the Hyperlink Manager.

   3. From the Hyperlink tab at the top select the Existing Anchor dropdown.

   4. Choose the anchor that you already created.

      1. You'll see that the URL has changed to something like #resources.

   5. Click “Ok.”

   6. Now you've hyperlinked the link at the top to the section heading on a page.

   7. Repeat for each anchor link that you've created.

Now your page should look something like the above, with a list of hyperlinks at the top, and then section headings for each part of the web page.

Using Anchor Links on other pages

Once you've created anchor links, you can also link to that specific section of the page by appending the link tag to the URL. For example, a page like https://member.house.gov/services/resources.htm if there is an anchor tag created on that page for Federal Resources and the name/id that you created was Federal then you can link to just that one specific section by linking https://member.house.gov/services/resources.htm/#federal and appending /#federal after the .htm, or if it's a folder page like https://member.house.gov/services/#federal 

FAQs

When I click on the anchor link the page scrolls down a bit too far

This is most likely because your site has a sticky navigation bar that sits at the top over everything else on the page. You can either just assume that folks will scroll as appropriate, or we can setup a special style for your site to help mitigate this.

--
What if I want special styles of buttons for the links?

 

If you want special styles or the links to look like buttons or something special, that's ok, just ask us in chat and we can usually fairly quickly add those into your site.

--
What if I want special styles of buttons for the links?

 

If you want special styles or the links to look like buttons or something special, that's ok, just ask us in chat and we can usually fairly quickly add those into your site.