Before We Begin

Before we begin this tutorial, there are just a few things you should know.

Writing the Code

The intention of this tutorial is not to show you how to write JavaScript or JQuery. Instead, it assumes you already have some script that you've already written or obtained from another source.

Other Languages

In this tutorial, we are focusing on JavaScript. However, this is not the only scripting language supported in Flare. The other languages (e.g., JScript, VBScript) can be integrated in the same way described in this tutorial for JavaScript. See Scripts.

JavaScript Used in This Tutorial

The JavaScript used in this tutorial is meant to add a small "back-to-top" button (i.e., link) to the lower-right corner of the topics in the output. This button appears when you start manually scrolling down the page, and by clicking the button the page automatically scrolls back to the top. At the end of steps in this tutorial, you will be asked to build and view output to make sure the script works as intended.

Copying the JavaScript Code

The steps in this tutorial will ask you to enter JavaScript code. Each time this happens, you can just copy the following and paste it as directed.

Copy 
(function () {
        if ($(".body-container").length === 1) {
            var bodyContainer = $('.body-container')[0];
            var mybutton = document.createElement("button");          // Create a <button> node
            var textnode = document.createTextNode("Top");          // Create a text node
            mybutton.appendChild(textnode);                            // Append the text
            mybutton.setAttribute("id", "myBtn");                    // Set id
            mybutton.addEventListener("click", topFunction);        // Set onclick event handler
        
            bodyContainer.appendChild(mybutton);    // Append button element to main element

            // 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 = "block";
                } else {
                    mybutton.style.display = "none";
                }
            }
    
            function scrollFunctionx() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    mybutton.style.display = "block";
                } 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 }, "smooth");
                $('html, documentElement').animate({ scrollTop: 0 }, "smooth");
                $('.body-container').animate({ scrollTop: 0 }, "smooth");
            }
        }
    })();