Top icon appears when User scrolls down the page [FIXED]

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Top icon appears when User scrolls down the page [FIXED]

Post by M33R4 »

Is there an easy way for an image icon (e.g back to top arrow) to appear on my page when the user scrolls about 65% down the page please :?:

Have looked at various YouTube videos and tried their suggestions but have failed so far.

Thanks very much.
Last edited by M33R4 on Tue May 25, 2021 2:35 am, edited 2 times in total.
Newbie to MadCap Flare
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Top icon appears when User scrolls down page

Post by M33R4 »

The following has worked satisfactorily - it's a 2 step process (adapted from W3schools website):

1) Open your master page/individual topic page in Text Editor view and copy and paste the following specs (in red) for your button just after your <body> and before the content of your page:
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">
<script type="text/javascript">/*<![CDATA[*///Get the button:
mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
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() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
/*]]>*/</script>Top</button>


**REST OF CONTENT**REST OF CONTENT** </body>

-----------------------------------------------------------------------------------------------------------------------------------------

This will add a Top icon to your master page/topic page like this
topicon.PNG
-----------------------------------------------------------------------------------------------------------------------------------------
2) Now open your stylesheet in Text Editor view and copy and paste the following code:
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}

#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}



-----------------------------------------------------------------------------------------------------------------------------------------
Now your Top icon changes in colour and becomes a link like this:
topiconturnsred.PNG
-----------------------------------------------------------------------------------------------------------------------------------------
Save your project.
When you preview your project, all topic pages that use this master page you've added the top functionality to will have this icon appear when you scroll down the page:
topiconeffective.PNG
You can of course change the background and font colour to suit your theme via the Text Editor view, in the following fields:
background-color: red; /* Set a background color */
color: white; /* Text color */


Hope that helps :wink:
You do not have the required permissions to view the files attached to this post.
Newbie to MadCap Flare
Post Reply