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.
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.
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.
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árrafo 1</a>
<a href="#parrafo2">Ir a párrafo 2</a>
<a href="#parrafo3">Ir a párrafo 3</a>
<a href="#parrafo4">Ir a párrafo 4</a>
<a href="#parrafo5">Ir a párrafo 5</a>
<h1 id="parrafo1">Pá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á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á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á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á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>