I got the script from the MadCap Flare website, but I customized it to meet my requirements. I used a Font Awesome icon instead of the “Top” text for the button. I styled the button using CSS to match my application’s existing scroll-to-top button. You can also use a Bootstrap button, but I decided to hardcode it. Here’s how it ended up looking.

On this page, I am going to explain:

This tutorial is meant for:

Steps to Implement the Scroll-to-Top Button

High-level steps to implement the scroll-top-button:

The Scroll-to-Top Button Script

You can define a button’s course of action using a script. In the case of a scroll-to-top button, we want the button to help us scroll right to the top of the page. We can achieve the desired action with the help of the following scroll-to-top button Javascript code:

Javascript Code Explanation and Customization Tips:

(function(){…….})(); Explanation: This piece of code indicates a function expression that is immediately invoked. An Immediately Invoked Function Expression (IIFE) helps retain the privacy of variables defined within the function. Customization: Not required.

if ($(".body-container").length === 1) {…} Explanation: The .body-container class is inbuilt in Flare r2 templates. It is always shown even if there is no text in the body. The code will search for elements with the .body-container class. If the total length of the result is equal to 1, i.e., only 1 element is found with class .body-container, then the next steps are to be carried out. Only

had a “body-container” in the Flare template I used. You can also manually search for the body-container class by opening an HTML page from the Output > HTML5 > Content folder using notepad. If there is no body-container class, which might be the case in older MadCap Flare versions, you would need to manually enter the class for bodyProxy, i.e., <MadCap:bodyProxy class=“body-container” /> in the MasterPage. Customization: Not required.

var bodyContainer = $(".body-container")[0]; Explanation: The variable “bodyContainer” is assigned the first result of the search. In our case, it is the main

element. Customization: Not required.

var mybutton = document.createElement(“button”); Explanation: Create a new button node. Customization: Not required.

mybutton.innerHTML = ‘’ Explanation: Embed the font awesome icon inside the button node. When using HTML inside Javascript use single quotes. Customization: You can change the Font Awesome icon if required. I used the “fas fa-arrow-circle-up” icon. You can check the Font Awesome website for icon sets and names.

mybutton.setAttribute(“id”,“myBtn”); Explanation: Set the id #myBtn to mybutton. All the styles defined in CSS for myBtn are applied here. Customization: Not required.

myButton.addEventListener(“click”, topfunction); Explanation: When the button is clicked, call the function “topfunction.” Customization: Not required.

bodyContainer.appendChild(mybutton); Explanation: Append the button to the main element. Customization: Not required. bodyContainer.onscroll = function (){ scrollFunction()}; window.onscroll = function() {scrollFunctionx()}; Explanation: This code helps in setting two scroll functions that define when the button should appear on the output. The first function sets the scroll function for the predefined body container and the second one is for window scrolling. The functions are used interchangeably depending on the responsive portion of the output. Customization: Not required.

function scrollFunction() { if(bodyContainer.scrollTop > 20 || (document.documentElement.scrolltop > 20) { myButton.style.display = “block”; } else { myButton.style.display = “none”; } } Explanation: If you scroll more than 20px from the top, the button appears in the style “block”. It is not displayed if there is no scrolling involved. Other than bodyContainer, we are also considering, i.e., root element scrolling. document.documentElement returns the root element of the document. So for HTML documents, the root element is. Customization: You can change the scrolling value (20) as per requirement.

function scrollFunctionx() { if(document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){ myButton.style.display = “block”; } else { myButton.style.display = “none”; } } Explanation: Same as scrollFunction() explanation. Customization: You can change the scrolling value (20) as per requirement. function topFunction(){ $(‘html, body’).animate({ scrollTop: 0 }, 1000); $(‘html, documentElement’).animate({ scrollTop: 0 }, 1000); $(’.body-container’).animate({ scrollTop: 0 }, 1000); } browsers in the “WebKit class” eg: Safari and Chrome respond to the body. Explanation: The “topfunction” function defines the action that the button should execute when it is clicked. The scrolling speed is set to 1000ms. This value gives a smooth, slow scrolling experience for the user. Customization: You can play around with the scrolling speed (1000).

Points To Note:

Button CSS

You need to use CSS to style the button. Enter the code below in your main stylesheet.

Button CSS Explanation and Customization Tips

display: none; Explanation: The button will not be visible at first. Customization: Not required.

position: fixed; bottom: 10px; right: 27px; Explanation: The button is at a fixed position specified by the “bottom” and “right” values. Customization: You can change the “bottom” and “right” values as per requirement.

z-index: 99; Explanation: The button is stacked on top of all elements. z-index works only with positioned elements. Customization: Not required.

font-size: 1rem; border: none; color: #fff; Explanation: The Font Awesome icon size can be changed using font-size. Font Awesome inherits any color set up under “color”. Customization: Size and color can be changed as per requirement.

background-color: #1797BE !important; cursor: pointer; padding: 0.625rem 0.6875rem 0.5rem 0.6875rem; border-radius: 3px; Explanation: Setting up the background color of the button, the cursor as a finger pointer, padding, and border-radius (to give slightly rounded edges to the button). Customization: Change the values as per requirement.

#myBtn:hover { background-color: #537f99 !important; } Explanation: The button changes its color to a dark blue when you place the cursor on top. Customization: Change the color as per requirement.


You can customize the scroll-to-top button with your values and requirements. If you want to play around with the CSS styling values, I recommend testing it out in the stylesheet in the Output folder and viewing the result on your browser instead of generating an output each time. This method saves a lot of time. It will not work for the Javascript code, though, and you should generate the output to view the result.

Take a Moment to Vote!


JavaScript Tutorials - MadCap Flare

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional. © 2022 Dhanya V

How to Implement a Scroll to Top Button With Font Awesome Icon in Madcap Flare - 95