Display a back to top icon when scrolling

As you may have noticed, we have an automatic arrow that appears as you scroll down our support pages, which will take you back to the top of the page if you click it. We love the back-to-top icon since it's an easy way for your readers to quickly scroll back to the top of a long page.

We add this customization to all new-from-scratch knowledge bases as of December 2022, but if you have a knowledge base that was created before then--or if you've removed it from your knowledge base, you can follow these instructions to add it yourself.

To set this up, you'll:

1. Create a snippet that includes the HTML and code to add the functionality.
2. Add that snippet to your Settings > Style page.
3. Add some Custom CSS to your Settings > Style page to style the back to top icon.

Here are the full detailed instructions:

1. Go to Library > Snippets.
2. Create a new snippet called "Back to Top".
3. That name should autopopulate the Merge Code Name to be backToTop, or something similar.
4. Give it a Snippet Description that makes sense. We recommend: "Display a clickable icon to take the reader back to the top of the page."
5. Use the dropdown next to the Snippet Content pane to select Code Editor.
6. Copy the code below and paste it into the Snippet Content pane.

   <a href="#" class="back-to-top"><i class="fas fa-angle-up" aria-hidden="true"></i></a>
   <script>
   //back to top
   $(function(){ 
     var offset = 250;
     $(window).scroll(function() {
   	if ($(this).scrollTop() > offset && $('.back-to-top.visible').length < 1) {
   	  $('.back-to-top').addClass('visible');
   	} else if($(this).scrollTop() <= offset && $('.back-to-top.visible').length > 0) {
   	  $('.back-to-top').removeClass('visible');
   	}
     });
   	   
     $('.back-to-top').click(function(event) {
   	event.preventDefault();
   	$('html, body').animate({scrollTop: 0}, 300);
   	return false;
     });
   });
   </script>

7. In Visibility, check the Hide from PDFs box.
8. In Restrict to Reader Groups, be sure the None / Show to all readers box is checked.
9. Your completed snippet should look like this:
   
10. Click Create to finish creating the snippet.
11. Once the snippet has been created and saved, copy the Merge Code Value.
12. Now go to Settings > Style.
13. Below the preview pane, select Custom HTML.
14. In the Custom HTML dropdown, be sure Body is selected.
15. Paste the snippet merge code you copied below the template("layout") merge code:
    
16. Select Custom CSS.
17. Copy the CSS below and paste it in to the bottom of your Custom CSS pane. Adjust as needed to get the color combination and positioning you'd like.

    /********************************************* Back to top snippet styling */
    /* Set the color, size, and more for the back to top square */
    .back-to-top {
      background-color: #fff;
      margin: 0;
      position: fixed;
      bottom: 100px;
      right: 45px;
      width: 55px;
      height: 45px;
      z-index: 100;
      text-decoration: none;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #acacac;
      box-shadow: 1px 3px 3px #aeaeae;
      visibility: hidden;
      opacity: 0;
      transition: all .2s ease-in-out;
    }
    /* Icon styles--set the icon color */
    .back-to-top i {
      font-size: 45px;
      color: #3a3a3a;
    }
    /* make visible when scrolled down on page */
    .back-to-top.visible {
      visibility: visible;
      opacity: 1;
    }
    /* mouse effect styles */
    .back-to-top:hover,
    .back-to-top:active,
    .back-to-top:focus {
      color: #ffffff;
    }

18. You can Preview your changes.
19. Once you're satisfied, be sure to Save your changes!

To update the CSS, you'll most likely want to adjust:

• The background-color of the back-to-top square in row 4.
• The border in row 15 (adjust thickness, color, etc.)
• The color of the icon in row 24.