Script Grátis Botão de Volta ao Topo na Loja Shopify Passo a Passo
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" style="
width: 20px;
height: 20px;
"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 18V2m0 0l7 7m-7-7L3 9"></path> </g></svg>
</button>
<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
outline: none;
background-color: white;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
min-width: max-content;
min-height: max-content;
box-shadow: none;
border: solid 1px black;
}
#myBtn:hover {
background-color: black;
border: solid 1px white;
}
#myBtn:hover path {
stroke: white;
}
</style>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 700 || document.documentElement.scrollTop > 700) {
document.getElementById("myBtn").style.display = "flex";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</script>