Links to headers within pages

Jump to solution
koger_13
Community Novice

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?

4 Solutions
d_ellis
Community Contributor

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.

View solution in original post

koger_13
Community Novice

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.

View solution in original post

frederik_vangom
Community Explorer

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> 

View solution in original post

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 Likes