[ARCHIVED] Links to headers within pages

[koger_13]

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?

[d_ellis · Accepted solution]

Hi Tara, the way to do this is with HTML anchors, as described in Stefanie's link above. You do need to go into the HTML editor, though.

First, add the code in bold inside the header that you want to be the "destination":

     <h2 id="UniqueIdentifier">Header title</h2>

The ID you add here must be unique to that header, so you will need a different one for each destination.

Second, you can create the link that will jump to the destination by adding this bolded code:

     <a href="#UniqueIdentifier">This link</a> will scroll the page to the appropriate header title

The ID you add here must have a hash symbol before it, and it must match the ID you chose for that header.

This is only a good idea on long long pages; and usually it's a better idea to split the page up into separate sub-pages if that is possible.

[koger_13 · Accepted solution]

Thanks so much! Yes, I followed Stephanie's link and it worked perfectly. Super easy! I just needed the guide. I can foresee this being really useful. As you mention, separate pages are ideal, but we're thinking, for instance, of glossary style pages where there may be a need to jump to a letter to see those entries, or timeline style pages that could have period-specific jumps.

[frederik_vangom · Accepted solution]

Hi, is it also possible to link to an ID on another canvas page. I alread tried some code out and this works in some cases, but sometimes he jump to the wrong part on the other page. This seems to happen on page with a lot of content (long page). The code I use on the page with the link :

<a title="Page title" href="https://canvas.my_organisation.com/courses/1111/pages/page_name#id_name">Link name</a>

I add this to the page with the HTML editor. When I save and check the code again with the HTML editor the code changed to :

<a title="Page title" href="https://canvas.my_organisation.com/courses/1111/pages/page_name#id_name" data-api-endpoint="https://canvas.my_organisation.com/api/v1/courses/1111/pages/page_name%23id_name" data-api-returntype="Page">Link name</a>

On the page where I link to I use the following code for the ID :

<h1 id="id_name">Subject</h2> 

[Stef_retired]

 @koger_13 ​, you might find the suggestions in this discussion useful: How do I create navigation with in a wikipage and the course syllabus page? (Keep reading, past the accordions suggestion, since I know you've already said you'd prefer not to employ accordions for this purpose; I promise, there's more.)

Also, I wanted to let you know that I edited/shortened the title of your post slightly and added a few tags to the question to make it more readily discoverable in search results,

[d_ellis · Accepted solution]

Hi Tara, the way to do this is with HTML anchors, as described in Stefanie's link above. You do need to go into the HTML editor, though.

First, add the code in bold inside the header that you want to be the "destination":

     <h2 id="UniqueIdentifier">Header title</h2>

The ID you add here must be unique to that header, so you will need a different one for each destination.

Second, you can create the link that will jump to the destination by adding this bolded code:

     <a href="#UniqueIdentifier">This link</a> will scroll the page to the appropriate header title

The ID you add here must have a hash symbol before it, and it must match the ID you chose for that header.

This is only a good idea on long long pages; and usually it's a better idea to split the page up into separate sub-pages if that is possible.

[BradMoser]

Would be cool to see a hyperlink option like in Google Docs, when you go to insert a hyperlink in a page that an option comes up that shows the "headers" found within that page. Simple add-on that has a ⌚️ time-saver element for all those who are intimidated by the HTML editor!  I will make that Feature Request and see what happens! Thanks for the HTML reminder. 

[jason_paddock]

Bradely, would you post the link to the feature request here?

[MsZ]

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 

[abigail_smith_2 · Accepted solution]

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.

[pmatheson]

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?

[koger_13 · Accepted solution]

Thanks so much! Yes, I followed Stephanie's link and it worked perfectly. Super easy! I just needed the guide. I can foresee this being really useful. As you mention, separate pages are ideal, but we're thinking, for instance, of glossary style pages where there may be a need to jump to a letter to see those entries, or timeline style pages that could have period-specific jumps.

[frederik_vangom · Accepted solution]

Hi, is it also possible to link to an ID on another canvas page. I alread tried some code out and this works in some cases, but sometimes he jump to the wrong part on the other page. This seems to happen on page with a lot of content (long page). The code I use on the page with the link :

<a title="Page title" href="https://canvas.my_organisation.com/courses/1111/pages/page_name#id_name">Link name</a>

I add this to the page with the HTML editor. When I save and check the code again with the HTML editor the code changed to :

<a title="Page title" href="https://canvas.my_organisation.com/courses/1111/pages/page_name#id_name" data-api-endpoint="https://canvas.my_organisation.com/api/v1/courses/1111/pages/page_name%23id_name" data-api-returntype="Page">Link name</a>

On the page where I link to I use the following code for the ID :

<h1 id="id_name">Subject</h2> 

[frederik_vangom]

I just read this article : https://community.canvaslms.com/groups/higher-ed/blog/2017/01/22/anchor-tags-explained-by-a-language... 

James Jones's post about the order of loading in a page might be the issue I have with the anchors.

[James]

 @frederik_vangom ,

That James Jones guy is all over the place. As a follow-up to that other message, it seems that there was some kind of bug in Chrome that was causing links not work, so it may not have been the order the page is loaded. When I wrote that, Canvas had recently switched from delivering the content as part of the page to delivering the content within a JavaScript variable and then displaying it on the page and that was causing problems for other things. Now Google turns up plenty of hits when asking about links in Chrome and most of them refer to a bug in Chrome.

I just recreated the experiment that I ran back then, or close to it. 20 paragraphs of Lorem Ipsum, headings with anchor elements with id=p1, p2, p3, ... every 2 paragraphs. Another page in Canvas with links to each of those anchor elements. They all worked fine in Canvas whether I opened it in a new tab or just followed the link in the current tab.

I'm beginning to think it was a bug with Chrome around that time, but I still think that if your pages are so long you need anchors, you might want to think about chunking them up. That's part of the recommendation for developing courses: Course Evaluation Checklist 

[frederik_vangom]

Hi James,

Thanks for the reply and the testing. Too bad if it would be a bug .. I have quite long pages because I need to add a lot of images (software application screenshots). The actual text content is not that long. 

When I click the link (that refers to an anchor on another page) I also get some strange behaviour; it opens the other page, and starts scrolling down, but at some point it stops scrolling and starts scrolling back up and stops again, at the wrong place (not an anchor). This  happens in the Google Chrome browser. Haven't tested other browsers.

With the linking to anchors on other plages I also wanted to create an index page that I can design myself.

[frederik_vangom]

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.

[ajeong]

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?

[frederik_vangom]

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.