Scroll hacia un elemento html

Scroll hacia un elemento html
Scroll hacia un elemento html
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, en este caso un vídeo.

Contenido

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;
}

 

Descargar scroll a un elemento html

Deja un comentario

Filtra por categoría:

¿Necesitas una web? Contacta con nosotros.

Relacionados: