cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
koger_13
Community Member

Links to headers within pages

Jump to solution

Can you create links to subheaders of sections down the page at the top that will allow users to jump via link? I'm working on a page that will be a long directory list, and we do not want to use accordions. This type of page may be developed for other uses and has the potential to become unwieldy. I.e. users would have to scroll a while just to know about subcategories and info below. Accordions would shortcut this but are not preferred departmentally. I've poked in the style guide and can't find this, though I thought it existed somewhere. Can I list the categories at the top of the page with a "Jump to" function and link them to those subheaders down the page?

15 Replies
frederik_vangom
Community Participant

I seem to have found a solution for the problem. I came upon this website : HTML Tags/Link Tags/links to a named anchor - TAG index 

An anchor can also be created with the name attribute instead of the id attribute and this seem to work at the moment for me. When clicking the link to an anchor on another page it opens this page and jumps directly to the anchor (created with the name attribute) without even showing scrolling.

Thanks for sharing your findings about anchor links to another page in Canvas. 

This solution however seems to require the use hard links (url#id) instead of relative links (#id). As a result, do the anchor links still work when you copy the Canvas course site for a new semester?

MsZ
Community Member

Hello, I need a bit more clarity on how to use this code. 

So I have added the bolded code to my Header so it looks like this: 

<h4 id="UniqueIdentifier">Weekly Schedule</h4>

 

My question is where exactly do I add this code: <a href="#UniqueIdentifier">

and what does this do/where do I put it?  </a> 

Finally, when I am trying to add the page anchor link to button, what do I put in the link box?

Thank you for the clarification!

-Savannah 

frederik_vangom
Community Participant

If you import an old course (or parts of an old course) to a new course with the import options in the course Settings page, this is possible. I had to do this myself. All the links to Canvas pages and Canvas files are updatedn, I guess only if also all pages and files are imported.

What doesn't seem to work is when you export an old course to a compressed file and try to import this compressed file. All links are kept the same, so all id references are not updated and since a course also has it's unique id number, none of the file or page links are found. 

Is it possible to do an anchor from one page to another?

For example if on a page (we will call it Page 1) and you want to send the person to another page (we will call it Page 2). However, "Page 2" has several things on it (utilizing anchors for a table of contents) so you would like to send them to a specific section of "Page 2" not just to the top and make them navigate to the correct spot. Can i make a link that would take them to a specific anchor location on another page?

abigail_smith_2
Community Contributor

The ID is for the destination/landing point, and the href is for the link at the top.  When students click the link at the top, it will jump them down to the destination point on the page.

HTML uses opening and closing tags. <a> is an opening tag indicating a link. </a> is the closing tag, indicating the end of the link.

View solution in original post

0 Kudos