Ejemplo básico de cómo realizar un Scroll hacia un elemento html con jQuery. Creando una animación scroll hacia un elemento html. En este ejercicio, al hacer clic en un botón, se realiza un scroll hacia el elemento destino. Para implementar correctamente el scroll animado hacia elementos HTML, consulta la documentación oficial de jQuery donde encontrarás todos los métodos disponibles.
¿Cómo estructurar el archivo HTML?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll hacia un elemento html</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="content">
<h1>Scroll hacia un elemento html</h1>
<p>Al hacer clic en el botón Ver vídeo se hace un scroll hacia un elemento html.</p>
<button class="boton">Ver Vídeo</button>
<div class="cuadro"></div>
<div id="destino">
<h2>Vídeo</h2>
<iframe width="1000" height="563" src="//www.youtube.com/embed/T_-w-_-fIOI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cuadro"></div>
</div>
</body>
</html>
¿Cómo implementar el scroll con jQuery?
// JavaScript Document
$(document).ready(function() {
$(".boton").click(function () {
$('html,body').animate({
scrollTop: $("#destino").offset().top
}, 500);
});
});
¿Cómo estilar con CSS?
@charset "utf-8";
/* CSS Document */
body{
background:#81d742;
}
.content{
width:1000px;
margin-top:50px;
min-height:600px;
background:#fff;
margin:0 auto;
padding:20px;
}
.cuadro {
width: 100%;
height: 350px;
background-color: #333;
margin: 30px 0;
}
Descargar scroll a un elemento html
Cómo hacer scroll a un elemento con jQuery
- Al hacer clic en un botón se ejecuta un scroll animado hacia un elemento HTML específico
- Se utiliza jQuery con el método animate() para desplazar la página suavemente
- La función offset().top obtiene la posición vertical del elemento destino en el documento
- El parámetro 500 en animate() define la duración de la animación en milisegundos
- Se selecciona 'html,body' para garantizar compatibilidad con navegadores distintos
