<div class="rtds-back-to-top rtds-fixed rtds-bottom-12 rtds-right-6 rtds-transition-all rtds-duration-300">
<a href="#" class="rtds-btn
rtds-btn--icon rtds-btn--s lg:rtds-btn--l rtds-btn--outlined rtds-bg-white rtds-shadow-lg hover:rtds-shadow-xl hover:rtds-scale-110 rtds-transition-all rtds-duration-300"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-up" />
</svg>
<span class="rtds-sr-only">
Torna in cima alla pagina
</span>
</a>
</div>
<div class="rtds-back-to-top rtds-fixed rtds-bottom-12 rtds-right-6 rtds-transition-all rtds-duration-300">
{% render '@button--icon', {
icon: "solid--arrow-up",
classes: 'rtds-btn--s lg:rtds-btn--l rtds-btn--outlined rtds-bg-white rtds-shadow-lg hover:rtds-shadow-xl hover:rtds-scale-110 rtds-transition-all rtds-duration-300',
label: "Torna in cima alla pagina",
href: "#"
}, true %}
</div>
/* No context defined. */
@layer components {
.rtds-back-to-top {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.rtds-back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
document.addEventListener('DOMContentLoaded', function() {
const backToTop = document.querySelector('.rtds-back-to-top');
if (!backToTop) return;
const link = backToTop.querySelector('a');
const scrollThreshold = 300;
function toggleBackToTop() {
const isDesktop = window.innerWidth >= 1024;
const scrollY = window.scrollY;
if (isDesktop) {
if (scrollY > scrollThreshold) {
backToTop.classList.add('is-visible');
} else {
backToTop.classList.remove('is-visible');
}
} else {
backToTop.classList.add('is-visible');
}
}
link.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('scroll', toggleBackToTop);
window.addEventListener('resize', toggleBackToTop);
toggleBackToTop();
});
No notes defined.