How To Implement A Scroll To Top Button With Font Awesome Icon In Madcap Flare

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.

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.

Conclusion

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!

References

JavaScript Tutorials - MadCap Flare

On this page, I am going to explain:#

This tutorial is meant for:#

Steps to Implement the Scroll-to-Top Button#

The Scroll-to-Top Button Script#

Javascript Code Explanation and Customization Tips:#

Points To Note:#

Button CSS#

Button CSS Explanation and Customization Tips#

Conclusion#

Take a Moment to Vote!#

References#