Return to top of page button in online documentation

To make it easier to return to the top of the page, on long web pages often a small button appears at the bottom right of the browser window. This button enables users to scroll back up to the top of the page with a single click.

You can also add such a button to an online documentation. All you need are a small open-source JavaScript library and a few lines of ready-made code in your page template.

Examples

Try it out: As you scroll down this page, two buttons will appear shortly after each other in the lower right corner of the browser window (two buttons in order to be able to show you two alternative solutions here). Clicking on one of these buttons takes you back to the top of the page.

Implementation for example 1 (gray button)

This solution uses the open-source JavaScript library jQuery GoUp!

In addition, the solution also needs jQuery (already integrated into the output by default by many authoring tools).

Step 1: If your authoring tool does not already include jQuery, include it manually (see the jQuery documentation for more information).

Step 2: In your page template, add the following code at the end of the body section:


<script src="YOUR-PATH/jquery.goup.min.js"></script>
<script>
 $(document).ready(function(){
  $.goup({
   containerColor: "#373737",
   arrowColor: "#fff",
   bottomOffset: 80,
   locationOffset: 30,
   hideUnderWidth: 0,
   trigger: 350,
   goupSpeed: 0
  });
 });
</script>

The first line includes the external script. Adjust the path in the first line according to your installation.

The section below initializes the script and executes it. You can adjust the parameters contained if necessary, and, for example, choose a different color or change the position. See the documentation that comes with the script.

Implementation for example 2 (blue button)

This solution uses the open-source JavaScript library Vanilla Back To Top

Other than example 1 it does not need jQuery.

In this case, add the following code at the end of the body section in your page template:


<script src="YOUR-PATH/vanilla-back-to-top.min.js"></script>
<script>
 addBackToTop({
  diameter: 50,
  backgroundColor: 'rgb(0, 102, 153)',
  cornerOffset: 50,
  textColor: '#fff'
 })
</script>

Adjust the path in the first line according to your installation. You only need to adjust the other parameters if needed.

___

Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

---

You do not see the buttons yet? Scroll down further.

##### ###### ###### ######## ## ###### ######## ### ####### ####### ### ######## ########## ########### ### #### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### #### ### ##### ######## ########## ##### ##### ######## ####### ### ######### ##### ##### ####### ##### ####### ###### ######### #### ####### ### #### ###### ##### ####### ### ######## # ######### ##### ############ #### ####### #### ##### ### ######### #### ######### ### ####### ####### #### # #### ######## ############# ### ###### ###### ####### ## ####### ### ######## #### ##### ##### ## ####### ##### #### ######## ###### ######### ########## ######### ##### ## #### ######### #######.