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.
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>
ARCHIVO JQUERY
// JavaScript Document
$(document).ready(function() {
$(".boton").click(function () {
$('html,body').animate({
scrollTop: $("#destino").offset().top
}, 500);
});
});
ARCHIVO 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;
}
