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 pages, which will take you back to the top of the page if you select 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, follow these instructions to add it yourself.

To set this up, you'll:

1. Create the back to top snippet.
2. Add that snippet to Customize > Style.
3. Style the back to top icon.

Here are the full detailed instructions:

Create the back to top snippet

First, create the back to top snippet, which houses all of the code and logic to generate the arrow.

1. Go to Snippets in the lefthand navigation. The Snippets page opens.
2. Create a new snippet using these settings:
   1. Snippet Name: Back To Top
   2. Merge Code Name: backToTop
   3. Snippet Description: Display a clickable icon to take the reader back to the top of the page.
3. Select the Snippet Content dropdown and select Code Editor.
4. Copy the code below and paste it into the Snippet Content Code Editor:

   <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>

5. In Visibility, check the Hide from PDFs box.
6. In Restrict to Reader Groups, be sure the None / Show to all readers box is checked.
7. Your completed snippet should look like this:
8. Select Create to finish creating the snippet.
9. Once the snippet has been created and saved, copy the Merge Code Value.

With your snippet created, proceed with the instructions to Add back to top snippet to Style.

Add back to top snippet to Style

Next, add your back to top snippet to your Body Custom HTML template. This guarantees that it will appear on all pages across your knowledge base.

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Select Body from the Select HTML section to edit dropdown.
4. Paste the snippet merge code you copied on an empty line below the [template("layout")] merge code. Your Body HTML should look something like this:

   <div class="row hg-site-body slideout-new">
       [template("layout")]
     
   
   </div>
   <div class="row ko-site-footer text-center xsize">
       <div>Copyright © 2025 Your Company, LLC. All rights reserved.
           <br>Made with <a href="https://www.knowledgeowl.com" target="_blank">KnowledgeOwl</a> <img class="ko-logo" src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/65cbb573a7123f123624c722/n/favicon-32px.svg">
       </div>
   </div>

5. Be sure to Save your changes.

With your snippet added to your knowledge base, check to see if the icon's appearing. If it's not appearing or if you'd like to change the color or style of the icon, follow the Style the back to top icon instructions.

Style the back to top icon

If your icon doesn't display, your knowledge base needs the CSS to style your back to top icon.Follow the instructions below to add it. If your icon is displaying but you want to change the style, look for the CSS in step 2 and follow the adjustments we recommend in step 3:

1. Still on Customize > Style (HTML & CSS), select Custom CSS.
2. 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 */
   /* basic styles */
   .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 var(--box-shadow-color);
     visibility: hidden;
     opacity: 0;
     transition: all .2s ease-in-out;
   }
   /* make visible when scrolled down on page */
   .back-to-top.visible {
     visibility: visible;
     opacity: 1;
   }
   /* icon styles */
   .back-to-top i {
     font-size: 45px;
     color: #3a3a3a;
   }
   /* mouse effect styles */
   .back-to-top:hover,
   .back-to-top:active,
   .back-to-top:focus {
     color: var(--white);
   }

3. You may need to make further tweaks to match your branding:
   1. To change the color of the overall back to top box, edit the background-color in row 4.
   2. To change the color of the arrow icon, edit the color in row 29.
   3. To change the border thickness or color, adjust the border values in row 15.
   4. If your knowledge base doesn't have color variables defined at the top of your Custom CSS, replace the var(--box-shadow-color) in row 16 with #aeaeae and the var(--white) in row 29 with #ffffff.
4. Be sure to Save your changes!