Botão Voltar ao Topo – Script Shopify

Script

<a href="#" class="back-to-top" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="height: 40px;"><g data-name="90-Arrow Up"><path fill="currentColor" d="M16 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0zm0 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14z"/><path fill="currentColor" d="m15.29 10.29-8 8L8.7 19.7l7.3-7.29 7.29 7.29 1.41-1.41-8-8a1 1 0 0 0-1.41 0z"/></g></svg></a>

<style>
.back-to-top svg {
  color: #000000;
}
  
.back-to-top {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  transition: opacity 0.3s ease; /* Transição suave */
}

.back-to-top:hover svg {
  opacity: 0.8;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var backToTop = document.querySelector('.back-to-top');

    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 100) {
            backToTop.style.display = 'block';
        } else {
            backToTop.style.display = 'none';
        }
    });

    backToTop.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});
</script>