Öncelikle daha önceden eklemediyseniz forum içerisinde jquery kütüphanesini çağırmamız gerekiyor.
Bunun için vendor/flarum/core/views/frontend app.blade.php’nin içinde head etiketinin altına aşağıdaki kodu ekleyin:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Daha sonra aşağıdaki kodu Admin panel -> Görünüm - > Özel Alt Bilgi (Footer) bölümüne ekliyoruz.
<a id='yukari_buton'><i class='fas fa-angle-double-up'></i></a>
<script>
var btn = $('#yukari_buton');
$(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>
Daha sonra yine admin panelden Özel Stiller (Custom CSS) bölümünden aşağıdaki kodu ekliyoruz.
#yukari_buton {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#yukari_buton i {
font-size: 2em;
line-height: 50px;
color: #fff;
}
#yukari_buton:hover {
cursor: pointer;
background-color: #333;
}
#yukari_buton:active {
background-color: #555;
}
#yukari_buton.show {
opacity: 1;
visibility: visible;
}
@media (max-width: 767px) {
#yukari_buton {
bottom: 70px;
right: 30px;
height: 50px;
}}
