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 !

#5

is this planned to be implemented as a template option in a further update?

#6

No, but I can add it to the roadmap.

#7

Hi all,

I easily got this to work with the W3schools tutorial “How To Create a Scroll Back To Top Button”.

Problem: I have 3 to 4 tabs on one page.
In the W3schools example it works with
let mybutton = document.getElementById("myBtn");
which works for the first tab, not for the others.

I think I need a different ID for each tab.

How can I do this??? :thinking:

Btw.: heres the full script:

<script>
				// Scroll to Top
				let mybutton = document.getElementById("myBtn");

				// When the user scrolls down 20px from the top of the document, show the button
				window.onscroll = function() {scrollFunction()};

				function scrollFunction() {
				  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
					mybutton.style.display = "block";
				  } else {
					mybutton.style.display = "none";
				  }
				}

				// When the user clicks on the button, scroll to the top of the document
				function topFunction() {
				  document.body.scrollTop = 0;
				  document.documentElement.scrollTop = 0;
				}
				</script>

Best regards,
Oliver

#8

Can you share a link? This way it’s easier to help debugging your issue.

#9

There’s nothing here that should necessitate the button being a part of your tabs. There should be just one button on the page, located outside of your tab structure (probably appended to the end of the page.

#10

:laughing: that was it - thank you Matt