Scroll hacia un elemento html

Scroll hacia un elemento html

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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *