Sei que aqui no site exitem inúmeras questões de Scroll Suave e Botão para "voltar ao topo" (back to top
), mas todas elas envolvem JavaScript ou jQuery, mas esse não
é o meu objetivo.
Gostaria de fazer, ou saber, se hoje em dia é possível fazer uma rolagem suave apenas com CSS. É possível fazer um scroll suave só com CSS e usar esse método em um botão do tipo Voltar para o Topo
?
Só o botão eu que manda de volta pro topo eu consegui, agora gostaria de colocar um comportamento de rolagem suave da página de volta para o topo.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
height: 300vh;
background-image: linear-gradient(red, blue);
}
.btn {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
background-color: #000;
text-decoration: none;
}
.btn::after {
content: "↑";
font-size: 32px;
font-weight: bold;
color: aliceblue;
transition: margin-top 250ms;
}
.btn:hover::after {
margin-top:-8px;
}
<section></section>
<a href="#" class="btn"></a>