There is plenty of them out there, but not original one for flarum design. For those that do not have time or knowledge,
Here is easy back to top button for Light and Dark versions that is not sore on the eye.
On custom header add:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
<a href="#" class="scrollToTop"><i class="fas fa-chevron-up"></i></a>
Custom Css:
.scrollToTop{
width: 36px;
bottom: 60px;
font-size: 16px;
margin-bottom: 0;
text-align: center;
cursor: pointer;
border-radius: @border-radius;
padding: 6px 0;
color: @control-color;
background: @control-bg;
opacity: 0.5;
border: 0;
font-weight: 900;
position:fixed;
right:55px;
display:none;
z-index: 1000;
}
.scrollToTop:hover{
text-decoration:none;
background-color: darken(fadein(@control-bg, 5%), 5%);
}
That's it. If you want more visibility opacity: 0.5; in css(less transparent)
