Using Anchor Links
An Anchor link is used when you want to link to a specific spot on a page. For example, if you have a list of questions at the top of the page and the answers at the bottom. To link the question to the answer, add an id to the answer and then link from the question to the answer. This can also used as a back to top link.
To create an Anchor id, go into the Backend Editor on the page that you want to add an anchor link to. Click on the HTML tab in the block of text and edit the HTML code.
In Flex 2, due to the fact that there is constantly a header featuring the Georgia State logo along with the site name and navigation bar at the top of the page, you may need to add the anchor "above", as it were, the place where you want to take people to in the page. For example, if you have a row that has a "Text Block," and you want to take people to that Text Block, go into the Text Block above that Text Block and add the necessary id=”anchor-name” to the end of that Text Block.
If there is no Text Block above the Text Block that you want to link to, you may use the ROW or COLUMN that the Text Block resides in, and give that Element the ID that you will use to take people to the Text Block.
If you are adding an Anchor ID to a Text Block, go to the area on the page where you want to link to (in either a Text Block above the one that you want to link to, or a paragraph above where you want to link to), add id=”anchor-name” within either an existing tag such as an h2 tag, or add a span tag to surround the spot that is going to be the anchor (where the link will point to).
- Sample of the anchor tag:<h3 id=”anchorlink”>Sub-Heading Name</h3>- if you have heading tags already in place (you are linking to a spot that is already a heading) <span id=”anchorlink”>Anchor link text</span> - adding the <span> </span> tags if there is not a tag in that spot already.
Create the link to the landing spot. The actual link will use the # sign in front of the id (name) of that spot. <a href=”#anchorlink”>Click Here to Go to Anchor Link</a> this would be the link if you are linking within the same page. Or <a href=”http://example.gsu.edu/testpage/#anchorlink” </a> if the link is to a spot on a page other than the page containing the link.
Tabs and accordion menus come equipped with auto-generated IDs of their own that you can link to within the page. You have the ability to change the names of these IDs to something more obvious than the auto-generated long string of numbers and letters if you choose.