I've made a few changes (e.g. I'm not using font-awesome) and it works, except when the browser is wide and displays the Side Navigation panel.
I think this is caused by either one of the following issues:
When the Side Navigation panel displays, the scrollbar for the topic is no longer for the whole window, but only for the body.
What can I do in the javascript to detect scrolling in the body instead of the window?
or:
When the Side Navigation displays, the width properties of the body are changed and my button is hidden somewhere off screen.
What can I do in the css to show the button when this happens?
Button added below the body proxy in the masterpage:
Code: Select all
<MadCap:bodyProxy /><a href="#top" id="return-to-top"><p><img src="../Images/Standard/chevron-up.png" style="mc-thumbnail: none;width: 30px;height: auto;" /></p></a>
Code: Select all
#return-to-top
{
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 99;
}
#return-to-top p
{
color: #fff;
margin: 0;
position: relative;
text-align: center;
font-size: 30px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover
{
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover p
{
color: #fff;
top: -5px;
}
Code: Select all
// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 150) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});