Skip to main content

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

  • Author:
  • Updated date:

I am a technical communicator who loves words and technology—not necessarily in that order.

A Customized Scroll-to-Top Button

I recently experimented with implementing and customizing a scroll-to-top (or back-to-top) button on my HTML5 MadCap Flare Help. This button helps users scroll to the top of the page. It is a beneficial feature to have in user guides with long and comprehensive pages.

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.

Scroll-to-Top Button With Font Awesome Icon

Scroll-to-Top Button With Font Awesome Icon

On this page, I am going to explain:

  1. How to implement the scroll-to-top button in MadCap Flare using Javascript and CSS
  2. How to customize the code
  3. The logic behind the code so you can customize the values to meet your requirements

This tutorial is meant for:

  1. Technical writers who have a basic-level understanding of HTML
  2. Users who know how to use MadCap Flare and are aware of its various project folders (like "Resources")
  3. Users who know how to create and link Javascript and Stylesheets to their MadCap Flare Project

Steps to Implement the Scroll-to-Top Button

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

  1. Download the Font Awesome icon set from the Font Awesome website (choose the "Free For Web" option).
  2. Copy-paste the Font Awesome folder to MadCap Flare's Content > Resources folder.
  3. Create a new folder called Scripts in the Content > Resources folder.
  4. Add a script to the Scripts folder titled ScrollToTop.js. (You can quickly create a script using notepad by saving the file as ScrollToTop.js under the type "All Files".) Scroll down to the section "The Scroll-to-Top Button Script" to view the entire script.
  5. Copy and paste the button CSS into the project stylesheet. Scroll down to the section "Button CSS" to view the code.
  6. Edit the MasterPage to insert the script.
  7. Import Font Awesome's all.css stylesheet into your project stylesheet by inserting this code at the top of your main project stylesheet: @import url('../fontawesome/css/all.css');

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:

(function () {
if ($(".body-container").length === 1) {
var bodyContainer = $('.body-container')[0];
var mybutton = document.createElement("button");  		
mybutton.innerHTML = '<i class="fas fa-arrow-circle-up"></i>';  		
			
mybutton.setAttribute("id", "myBtn");					
mybutton.addEventListener("click", topFunction);		

bodyContainer.appendChild(mybutton);	

// When the user scrolls down 20px from the top of the document, show the button
//Both functions are used based on the responsive portion of the output
bodyContainer.onscroll = function() {scrollFunction()};
window.onscroll = function() {scrollFunctionx()};

function scrollFunction() {
if (bodyContainer.scrollTop > 20 || document.documentElement.scrollTop > 20) {
					mybutton.style.display = "inline";
				} else {
					mybutton.style.display = "none";
				}
			}

function scrollFunctionx() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
					mybutton.style.display = "inline";
				} else {
					mybutton.style.display = "none";
				}
			}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
				$('html, body').animate({ scrollTop: 0 }, 1000);
				$('html, documentElement').animate({ scrollTop: 0 }, 1000);
				$('.body-container').animate({ scrollTop: 0 }, 1000);
			}
		}
})();

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.

Scroll to Continue

Only <div> 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.

Important: If the body-container class is absent in your template, the code will not work.

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 <div> element.

Customization: Not required.


var mybutton = document.createElement("button");

Explanation: Create a new button node.

Customization: Not required.


mybutton.innerHTML = '<i class="fas fa-arrow-circle-up"></i>'

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 <html>, i.e., root element scrolling. document.documentElement returns the root element of the document. So for HTML documents, the root element is <html>.

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); }

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:

  1. Do not insert the script internally. As explained on this page, always create a separate folder for scripts and link the desired script to the MasterPage. This step should be taken to avoid the issue mentioned in the following point.
  2. The script can be opened and edited in MadCap Flare. But I have found that editing the script directly in MadCap Flare sometimes corrupts the script. To avoid this, access the script from outside your project in your local system. Open and edit it using your preferred code editor.

Button CSS

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

/* Custom Scroll Button */

#myBtn
{
	
	display: none; 	
	position: fixed;	
	bottom: 10px;
	right: 27px;
	z-index: 99;
	font-size: 1rem;
	border: none;
	color: #fff;
	background-color: #1797BE !important;
	cursor: pointer;
	padding: 0.625rem 0.6875rem 0.5rem 0.6875rem;
	border-radius: 3px; 
	
}

#myBtn:hover
{
	background-color: #537f99 !important;	
}

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

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

Related Articles