Back to the top icon on longer pages

Andreas_Hopf

How does one integrate "Back to the top" icons on longer pages with several sections, so the viewer can jump right back to the table of contents?

Casey Sato

Hi Andreas,

While I'm not super proficient with design, I was able to test out the following steps and it worked as designed in my instance of Canvas.

Step 1: Create the Anchor Tag

1. Open the page in Canvas where you want to add the "Back to the Top" functionality.

2. Click the "Edit" button.

3. In the bottom-right corner of the RCE, click the </> button. This will open the HTML Editor.

4. Find the first line of code on your page. This is the code for your table of contents or the first element at the top.

5. Before this first line, add the following code:

   
   

   HTML
   

    

   
   

   
   

   
   

   <SPAN class="hljs-tag"><<SPAN class="hljs-name">a</SPAN> <SPAN class="hljs-attr">id</SPAN>=<SPAN class="hljs-string">"top"</SPAN>></SPAN><SPAN class="hljs-tag"></<SPAN class="hljs-name">a</SPAN>></SPAN>
   

   
   

   
   

   This code creates an invisible anchor at the very top of your page with the ID "top." You can also use a div tag with an ID, like <div id="top"></div>, but the anchor tag is a clean and common practice.

Step 2: Create the Link to the Anchor

1. Scroll down to the end of a section in the HTML Editor.

2. Add the following code where you want your "Back to the Top" link to appear:

   
   

   HTML
   

    

   
   

   
   

   
   

   <SPAN class="hljs-tag"><<SPAN class="hljs-name">p</SPAN> <SPAN class="hljs-attr">style</SPAN>=<SPAN class="hljs-string">"text-align: right;"</SPAN>></SPAN><SPAN class="hljs-tag"><<SPAN class="hljs-name">a</SPAN> <SPAN class="hljs-attr">href</SPAN>=<SPAN class="hljs-string">"#top"</SPAN>></SPAN>Back to the top ⬆️<SPAN class="hljs-tag"></<SPAN class="hljs-name">a</SPAN>></SPAN><SPAN class="hljs-tag"></<SPAN class="hljs-name">p</SPAN>></SPAN>
   

   
   

   
   

   • href="#top" is the crucial part that links to the anchor you created in Step 1.

   • style="text-align: right;" is optional, but it's a good way to position the link on the right side of the page to make it more prominent. You can change right to center or left to suit your preference.

   • You can change the text "Back to the top ⬆️" to whatever you like.

3. Repeat this for every section where you want the link to appear.

4. Click the </> button again to switch back to the regular RCE. You should now see the "Back to the top" link displayed on your page.

5. Click "Save".

Important Note: The reason this method works better is that Canvas is less likely to strip out id attributes when they are embedded in the HTML source code directly. When you use the built-in RCE link creator, it sometimes creates an HTML structure that the editor's automatic cleaning process misinterprets and removes upon subsequent edits.

By working in the HTML Editor, you bypass this potential issue and create a reliable navigation feature for your students.