1

Buenas queridos amigos de stackoverflow.

Quisiera saber que tipo de codigo implementar con jquery o javascript puro para crear un scroll animado que me lleve hacia un id de una misma página al presionar un botón.

3
  • El id se conoce o se introduce de alguna manera? Commented el 6 oct. 2017 a las 19:24
  • @AdrianaHernández el id ya se conoce.
    – Tysaic
    Commented el 6 oct. 2017 a las 19:27
  • 1
    ¿Qué has intentado?
    – fredyfx
    Commented el 6 oct. 2017 a las 19:39

2 respuestas 2

0

Teniendo un tag con id id_del_elemento y un botón con id boton, el código usando jQuery sería algo como lo siguiente:

    $('#boton').click(function(){
        $('html, body').animate({
            scrollTop: ($('#id_del_elemento').offset().top)
        },500);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100px;background-color:#c0ffee;">El elemento sigue a este div</div>
<div id="id_del_elemento">Elemento</div>
<div style="height:400px;background-color:#c0c0c0;">El botón está más abajo...</div>
<button id="boton">Click para hacer scroll</button>

Espero te sirva. Saludos.

0

Si lo único que buscas es ir a un elemento con un id particular puedes hacerlo simplemente utilizando links:

<a href="#parrafo1">Ir a p&aacute;rrafo 1</a>
<a href="#parrafo2">Ir a p&aacute;rrafo 2</a>
<a href="#parrafo3">Ir a p&aacute;rrafo 3</a>
<a href="#parrafo4">Ir a p&aacute;rrafo 4</a>
<a href="#parrafo5">Ir a p&aacute;rrafo 5</a>

<h1 id="parrafo1">P&aacute;rrafo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, ipsum in consequat volutpat, enim magna porttitor nibh, nec sagittis justo nisi at dui. Ut scelerisque sem vitae velit interdum, vel varius ligula mattis. Ut venenatis sollicitudin massa, at iaculis dolor volutpat vitae. Vestibulum vel consectetur sem. Vivamus dapibus nunc egestas risus efficitur efficitur. Phasellus quis sodales ipsum. Cras aliquam viverra nisl, at mollis ligula congue sit amet. Vestibulum ex mi, scelerisque pretium massa at, condimentum sagittis ipsum. Phasellus metus nunc, scelerisque vel suscipit sed, sollicitudin ac dui. Integer dictum est nec ultrices volutpat. Integer condimentum, ante non mollis interdum, ligula orci facilisis sem, quis iaculis arcu magna sit amet ante. Donec ullamcorper diam eget ipsum ultricies elementum. Nam ultrices velit eget metus porta tincidunt.</p>
<a href="#top">Arriba</a>
<h1 id="parrafo2">P&aacute;rrafo 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, ipsum in consequat volutpat, enim magna porttitor nibh, nec sagittis justo nisi at dui. Ut scelerisque sem vitae velit interdum, vel varius ligula mattis. Ut venenatis sollicitudin massa, at iaculis dolor volutpat vitae. Vestibulum vel consectetur sem. Vivamus dapibus nunc egestas risus efficitur efficitur. Phasellus quis sodales ipsum. Cras aliquam viverra nisl, at mollis ligula congue sit amet. Vestibulum ex mi, scelerisque pretium massa at, condimentum sagittis ipsum. Phasellus metus nunc, scelerisque vel suscipit sed, sollicitudin ac dui. Integer dictum est nec ultrices volutpat. Integer condimentum, ante non mollis interdum, ligula orci facilisis sem, quis iaculis arcu magna sit amet ante. Donec ullamcorper diam eget ipsum ultricies elementum. Nam ultrices velit eget metus porta tincidunt.</p>
<a href="#top">Arriba</a>
<h1 id="parrafo3">P&aacute;rrafo 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, ipsum in consequat volutpat, enim magna porttitor nibh, nec sagittis justo nisi at dui. Ut scelerisque sem vitae velit interdum, vel varius ligula mattis. Ut venenatis sollicitudin massa, at iaculis dolor volutpat vitae. Vestibulum vel consectetur sem. Vivamus dapibus nunc egestas risus efficitur efficitur. Phasellus quis sodales ipsum. Cras aliquam viverra nisl, at mollis ligula congue sit amet. Vestibulum ex mi, scelerisque pretium massa at, condimentum sagittis ipsum. Phasellus metus nunc, scelerisque vel suscipit sed, sollicitudin ac dui. Integer dictum est nec ultrices volutpat. Integer condimentum, ante non mollis interdum, ligula orci facilisis sem, quis iaculis arcu magna sit amet ante. Donec ullamcorper diam eget ipsum ultricies elementum. Nam ultrices velit eget metus porta tincidunt.</p>
<a href="#top">Arriba</a>
<h1 id="parrafo4">P&aacute;rrafo 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, ipsum in consequat volutpat, enim magna porttitor nibh, nec sagittis justo nisi at dui. Ut scelerisque sem vitae velit interdum, vel varius ligula mattis. Ut venenatis sollicitudin massa, at iaculis dolor volutpat vitae. Vestibulum vel consectetur sem. Vivamus dapibus nunc egestas risus efficitur efficitur. Phasellus quis sodales ipsum. Cras aliquam viverra nisl, at mollis ligula congue sit amet. Vestibulum ex mi, scelerisque pretium massa at, condimentum sagittis ipsum. Phasellus metus nunc, scelerisque vel suscipit sed, sollicitudin ac dui. Integer dictum est nec ultrices volutpat. Integer condimentum, ante non mollis interdum, ligula orci facilisis sem, quis iaculis arcu magna sit amet ante. Donec ullamcorper diam eget ipsum ultricies elementum. Nam ultrices velit eget metus porta tincidunt.</p>
<a href="#top">Arriba</a>
<h1 id="parrafo5">P&aacute;rrafo 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor, ipsum in consequat volutpat, enim magna porttitor nibh, nec sagittis justo nisi at dui. Ut scelerisque sem vitae velit interdum, vel varius ligula mattis. Ut venenatis sollicitudin massa, at iaculis dolor volutpat vitae. Vestibulum vel consectetur sem. Vivamus dapibus nunc egestas risus efficitur efficitur. Phasellus quis sodales ipsum. Cras aliquam viverra nisl, at mollis ligula congue sit amet. Vestibulum ex mi, scelerisque pretium massa at, condimentum sagittis ipsum. Phasellus metus nunc, scelerisque vel suscipit sed, sollicitudin ac dui. Integer dictum est nec ultrices volutpat. Integer condimentum, ante non mollis interdum, ligula orci facilisis sem, quis iaculis arcu magna sit amet ante. Donec ullamcorper diam eget ipsum ultricies elementum. Nam ultrices velit eget metus porta tincidunt.</p>
<a href="#top">Arriba</a>

3
  • Si pero deseo es que me haga el scroll y animado.
    – Tysaic
    Commented el 6 oct. 2017 a las 19:27
  • No entiendo muy bien a qué te refieres Commented el 6 oct. 2017 a las 19:31
  • No entiendo como esta respuesta responde a la pregunta, si puedes explica un poco como se hace el scroll aquí Commented el 6 oct. 2017 a las 19:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.