Scroll Back To Top Button - kookaburra

Backlight Customization
#1

Hey there,

with pangolin I had implemented a Scroll Back To Top Button via php and css:

function scripts() {
echo ’

<a href="#top" class="btn-scroll-to-top" title="Top of page"><i class="fa fa-arrow-up fa-lg"></i></a>

<script>
$(document).ready(function() {
$(".btn-scroll-to-top").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$(".btn-scroll-to-top").fadeIn();
} else {
$(".btn-scroll-to-top").fadeOut();
}
});
});
</script>

';

}

.btn-scroll-to-top {
background-color: transparent;
display: none;
position: fixed;
bottom: 67px;
right: 20px;
border: 0px solid;
height: 32px;
width: 32px;
border-radius: 50%;
text-align: center;
line-height: 29px;
vertical-align: middle;
text-decoration: none;
color:#77787b;
}

.btn-scroll-to-top:hover {
text-decoration: none;
color:#77787b;
}

a.btn-scroll-to-top {
z-index: 3;
}

UnfortunatelyI cannot make it work with kookaburra.

Could you help me, please?

Many thanks and Krgds
Sven M

#2

Hi Sven,

Your JS above is written in jQuery syntax. Kookaburra does not include jQuery, jQuery being rather outdated nowadays.

You’ll need to refactor your code using pure JavaScript.

#3

Maybe start here:

#4

Many thanks, I will do so !