5

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>

2
  • @JoãoPedroSchmitz isso ele já tem, podes executar o código para ver.
    – Pbras
    Commented 29/10/2018 às 12:42
  • Obrigado pela observação, tinha testado mas acho que não reparei! Commented 29/10/2018 às 12:51

1 Resposta 1

9

Sim, basta meteres, scroll-behavior: smooth;no html. https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Se não quiseres meter em todos os scrolls da página podes criar uma nova class de css e meter scroll-behavior: smooth; lá e depois atribuir essa class aos que queres.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
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>

Vale lembrar que esse método ainda não é suportado na maioria dos navegadores, apenas versões mais atuais de navegadores modernos estão suportando, como pode ser visto no site Can I Use.

2
  • ótimo método, acho que seria válido citar que o suporte nos browser ainda é bastante escasso. Commented 29/10/2018 às 13:21
  • Não tinha reparado nisso obrigado :)
    – Pbras
    Commented 29/10/2018 às 13:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .