Efeito de scroll com Jquery

Este será um post bem rápido para mostrar um snippet de código que me ajudou a reduzir 1 biblioteca e manteve um efeito legal de scroll nos sites de uma página (as conhecidas landing pages).

Segue o snippet abaixo

$('html, body').animate({
    scrollTop: ($("objetoParaOndeIr").offset().top)
},500);

Como você pode ver não precisa fazer muito.

Para uma página Html que possui um menu com varios links apontando para sessoes especificas do site, você teria algo similar ao exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>teste</title>
</head>
<body>
    <section style="min-height: 75vh;">
        <a href="#sessao1">sessao1</a>
        <a href="#sessao2">sessao2</a>
        <a href="#sessao3">sessao3</a>
        <a href="#sessao4">sessao4</a>
    </section>
    <section id="sessao1" style="min-height: 75vh; background-color: aqua;"><h1>sessao1</h1></section>
    <section id="sessao2" style="min-height: 75vh; background-color: burlywood;"><h1>sessao2</h1></section>
    <section id="sessao3" style="min-height: 75vh; background-color: darkgray;"><h1>sessao3</h1></section>
    <section id="sessao4" style="min-height: 75vh; background-color: goldenrod;"><h1>sessao4</h1></section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $("a").click(function () {
            console.log(this);
            $('html, body').animate({
                scrollTop: ($(this.hash).offset().top)
            }, 500)
        })

    </script>
</body>
</html>

Deixe um comentário Cancelar resposta