Littlegolden Here you are
First, download a copy of jquery.min.js to a location on your server. In this case, I'm storing in a directory called "js"
Add this into your custom header
<a id="btt"><i class="fas fa-chevron-up"></i></a>
<script src="https://your-flarum-address/js/jquery.min.js"></script>
<script>
var btn = $('#btt');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});
</script>
Add this into your custom CSS
#btt {
display: inline-block;
background: rgba(0,0,0,0.3);
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 55px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
}
#btt:hover {
background: rgba(0,0,0,0.7);
text-decoration: none;
}
#btt::after {
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #808080;
}
#btt.show {
opacity: 1;
visibility: visible;
z-index: 10000;
}
#btt i {
margin-top: 32%;
font-size: 1.2rem;
color: #808080;
}
Obviously, change colours to suit your own site etc.
