{"id":1340,"date":"2017-09-13T17:19:20","date_gmt":"2017-09-13T17:19:20","guid":{"rendered":"https:\/\/in.nau.edu\/web\/?page_id=1340"},"modified":"2020-04-22T12:55:41","modified_gmt":"2020-04-22T19:55:41","slug":"anchors","status":"publish","type":"page","link":"https:\/\/in.nau.edu\/web\/anchors\/","title":{"rendered":"Anchor links"},"content":{"rendered":"

Anchor links<\/h1>\n\n\n\n
\n
\n
\n \n
\n
\n Overview Tab Open<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n How-To Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Troubleshooting Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n \n
\n \n
\n
Overview Accordion Open<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Anchor links, also known as jump links<\/em> and in-page links<\/em>, are lists of links at the top of a page that take site visitors to a location, usually a heading, further down on the same web page.<\/p>\n
Benefits of anchor links<\/h3>\n
When they appear at the top of a web page, anchor links act as a mini table of contents for the page, and they give site visitors a quick preview of what’s available on a comparatively lengthy web page.<\/p>\n
Drawbacks of anchor links<\/h3>\n
Some site visitors might get confused momentarily when an anchor link takes them to a location further down on the page instead of taking them to a different web page.<\/p>\n
Alternatives to anchor links<\/h3>\n
If the page contains many lengthy sections of information, consider breaking the page into multiple separate pages and then create a standalone table of contents page that links to each of the separate pages.<\/p>\n
Example<\/h3>\n
Anchor links don’t work inside of tabs! You can view an example below (on the mobile view, you’ll need to scroll to the bottom of the content to see the example).<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
How-To Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
How to make an anchor link<\/h3>\n
Anchor links have two parts:<\/p>\n
\n
the clickable link at the top of the page<\/li>\n
the section of the page that the link goes to<\/li>\n<\/ul>\n
You might find it easier to start with the second part, creating the anchor at the right page section. Then create the link to the anchor.<\/p>\n
Make the anchor<\/h4>\n
Open the page where you want to create an anchor link, and then<\/p>\n
\n
Switch to the Text tab (not the Visual tab) of the editor on that page.<\/li>\n
Locate the heading for the section you want to link to<\/em>.<\/li>\n
Within that heading, paste the following code, so it looks as shown below:
\n`\n<h4 id=\"TYPE A UNIQUE ID HERE\">TITLE TEXT HERE<\/h4> \n<\/code><\/li>\n`
`Replace the words TYPE A UNIQUE ID HERE text with text of your own that uniquely identifies that location on the page. It’s best to type something short and easy to remember. For example, for the College of Arts and Letters heading, you could do this: \n \n<h4 id=\"cal\">College of Arts and Letters<\/h4> \n<\/code><\/li>\n`
Update your page in WordPress.<\/li>\n<\/ol>\nMake the link that goes to the anchor<\/h4>\nStay in the Text tab of the page editor. If you switch to the Visual tab, you will lose some work due to a bug in the editor.<\/p>\n Locate the section at the top of the page when you want your link to appear, and then<\/p>\n \nType the text that will serve as the link. Make sure it exactly matches the words in the heading that you’re linking to. \n(Note: you can instead copy the heading text and paste it where you want the link.)<\/li>\n Select all of the text in the link.<\/li>\n Select the link button in the text editor.<\/li>\n In the URL field of the window that appears, type a pound sign (#) followed by the ID of the heading you want to link to. For example, if you used cal<\/code> as the ID for the heading you want to link to, type #cal<\/code> in the URL field.<\/li>\n Click the Add Link button in the window.<\/li>\n Update your page in WordPress.<\/li>\n<\/ol>\nTips for using anchor links<\/h3>\nMake sure the destination of an anchor link is at the beginning of a coherent section of the page. Linking to a heading is usually best, but in some cases, it can make sense to link to something else, such as the start of a table if the table has a caption you can use as your link text.<\/p>\n Make sure the wording of each link in the mini table of contents is the same as the name of the heading that you are linking to.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n \n \n \n Troubleshooting Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n \n \n\n\nIf your anchors do not seem to work as they should try:<\/p>\n\nMake sure your ID is type correctly, it is case sensitive<\/li>\n Make sure anchors are only within Header tags (h2,h3,h4,h5)<\/li>\n Links should be the name of the page, www.nau.edu\/yoursite\/yourpage#ID if you are linking from another page<\/li>\nIf the page doesn’t land exactly where it should test in a Private\/Incognito window<\/li>\n<\/ul>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n <\/div>\n\nExample of anchor links<\/h2>\nThe section immediately below shows how a collection of anchor links might appear on a web page. The page contains a heading, a brief introductory sentence or two, and then a list of anchor links that serve as a table of contents for the page. Site visitors can click on an anchor link to go straight to the related section of that page.<\/p>\nAdvisors and contacts for colleges and academic programs<\/h3>\nEach college and graduate program has its own advisors who specialize in information about those programs. Select your program from the list below, and then contact the appropriate advisor.<\/p>\n\nCollege of Arts and Letters<\/a><\/li>\n College of Education<\/a><\/li>\n College of Forestry, Engineering, and Natural Sciences<\/a><\/li>\n College Health and Human Services<\/a><\/li>\n College of Social and Behavioral Sciences<\/a><\/li>\n Statewide and Online programs<\/a><\/li>\n W.A. Franke College of Business<\/a><\/li>\n<\/ul>\n <\/p>\n College of Arts and Letters<\/h3>\nMore explanatory text about the College of Arts and Letters goes here.<\/p>\n <\/p>\n College of Education<\/h3>\nMore explanatory text about the College of Education goes here.<\/p>\n <\/p>\n College of Forestry, Engineering, and Natural Sciences<\/h3>\nMore explanatory text about the College of Forestry, Engineering, and Natural Sciences goes here.<\/p>\n <\/p>\n College of Health and Human Services<\/h3>\nMore explanatory text about the College of Health and Human Services goes here.<\/p>\n <\/p>\n College of Social and Behavioral Sciences<\/h3>\nMore explanatory text about the College of Social and Behavioral Sciences goes here.<\/p>\n <\/p>\n Statewide and Online programs<\/h3>\nMore explanatory text about the Statewide and Online programs goes here.<\/p>\n <\/p>\nW.A. Franke College of Business<\/h3>\nMore explanatory text about the W.A. Franke College of Business goes here.<\/p>\n\n\n \n\n\n \n Academic unit site support<\/h3>\n <\/div>\n \n \n<\/i> Digital Marketing Support<\/a><\/p>\n<\/i> 928-523-1741<\/a><\/p>\n<\/div>\n <\/div>\n <\/div>\n\n\n \n \n Business unit site support<\/h3>\n <\/div>\n \n \n<\/i> ServiceNow<\/a><\/p>\n<\/i> 928-523-1511<\/a><\/p>\n<\/div>\n <\/div>\n <\/div>\n\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":" Anchor links Example of anchor links The section immediately below shows how a collection of anchor links might appear on a web page. The page contains a heading, a brief introductory sentence or two, and then a list of anchor links that serve as a table of contents for the page. Site visitors can click […]<\/p>\n","protected":false},"author":51,"featured_media":76,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","ring_central_script_selection":"","footnotes":""},"class_list":["post-1340","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages\/1340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/comments?post=1340"}],"version-history":[{"count":4,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages\/1340\/revisions"}],"predecessor-version":[{"id":7434,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages\/1340\/revisions\/7434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/media\/76"}],"wp:attachment":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/media?parent=1340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}