style.cursor = "pointer" not working with scrollbar anymore

[B-u-s-h]

Hello,

I made a scrolly lottie animation with smooth-scrollbar containing an element (html-ID-Tag "back") as a button for linking to another url.

Without the smooth-scrollbar code, the link in the lottie animation works. With the smooth-scrollbar not anymore.

With the smooth-scrollbar code, it seems not possible anymore to add the interactivity to the lottie element "back":

buttonLinkBack.style.cursor = "pointer";
buttonLinkBack.addEventListener("click", () => {
window.open("https://cognitograph.ch/index.php/bildungssystem-der-schweiz");
});

I console-logged the element to control that it stays in place during the scrolling, and it did.

Thanks a lot for any help!

The animation is here:
https://www.cognitographik.ch/scrolly-verlauf/scrolly-verlauf.html

HTML:

<title>Scroll-Animation Bildungsverlauf</title>

<script src='https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.1/lottie.min.js'></script><script src="./script.js"></script>

JavaScript:
let lottieProgress = lottie.loadAnimation({
container: document.querySelector(".lottie-progress"),
renderer: "svg",
loop: false,
autoplay: false,
path: "https://www.cognitographik.ch/wp-content/uploads/2024/01/verlauf.json"
});

function linkFunction() {
let buttonLinkBack = document.getElementById("back");
buttonLinkBack.style.cursor = "pointer";
buttonLinkBack.addEventListener("click", () => {
window.open("https://cognitograph.ch/index.php/bildungssystem-der-schweiz");
});
console.log(buttonLinkBack.id);
}

const scrollbar = Scrollbar.init(document.querySelector(".container"), {
renderByPixels: false
});

scrollbar.addListener(() => {

let totalHeight = scrollbar.limit.y;
let scrollFromTop = scrollbar.scrollTop;
let totalFrames = lottieProgress.totalFrames;
let scrollPercentage = (scrollFromTop * 100) / totalHeight;
let scrollPercentRounded = Math.round(scrollPercentage); // Just in case

console.log(lottieProgress.totalFrames);

// Check if the current frame is the last frame. If it's the last frame, do nothing. This prevents showing the empty frame at the end. Thanks Pauline for pointing out.
if ((scrollPercentage * totalFrames) / 100 < totalFrames) {
lottieProgress.goToAndStop((scrollPercentage * totalFrames) / 100, true);
} else {
return;
}

linkFunction();

});

/*
//change second value to change initial scroll position and second for the duration
scrollbar.scrollTo(0, 450, 3500);
*/

[B-u-s-h]

Sorry, it somehow clipped the html code

<script src='https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.1/lottie.min.js'></script><script src="./script.js"></script>

[B-u-s-h]

And again. Seems not possible to post the code...