<div class="scroll-top hide" data-behaviour="scroll-top">
<button id="scroll-top" title="Go to top">
<img src="/assets/example-content/back_to_the_top.png" alt="back to top" id="optionalstuff" />
</button>
</div>
No notes defined.
/* No context defined. */
export default parentElement => {
window.addEventListener('scroll', () => {
const { scrollTop } = document.documentElement;
if (
scrollTop >
document.querySelector('.image-with-caption').offsetTop - 80
) {
parentElement.classList.remove('hide');
} else {
parentElement.classList.add('hide');
}
});
parentElement.addEventListener('click', () => {
window.scroll(0, 0);
});
};
.scroll-top {
position: fixed;
right: 1rem;
bottom: 4rem;
z-index: 2;
&.hide {
display: none;
}
button {
border: none;
background-color: transparent;
border-radius: 50%;
width: 5rem;
height: 5rem;
}
}
<div class="scroll-top hide" data-behaviour="scroll-top">
<button id="scroll-top" title="Go to top">
<img
src="/assets/example-content/back_to_the_top.png"
alt="back to top"
id="optionalstuff"
/>
</button>
</div>