Bloquear sección de una pagina – javascript html css

Pregunta:


en mi empresa me estan pidiendo bloquear una parte de la pagina, la pagina carga inicialmente así: introducir la descripción de la imagen aquí

Pero cuando le de click a la opción “Equipo Seadog”
introducir la descripción de la imagen aquí
se debe desbloquear la sección de la pagina la cual se encuentra en la parte inferior y bajaria automaticamente hasta esa parte de la pagina.

Este es el codigo de la pagina:

<div class="principal">
<div id="divHome" class="row">
    <div class="container">
        <div class="row">
            <div class="col-5">
                <h1 id="h1HomeTitle" class="lang" key="h1HomeTitle">Laboratorio estrategico</h1>
                <h4 class="lang" key="h4FHomeFirstText">
                    Diseñamos a través de las necesidades de <br> marca la mejor ruta 
                    para cumplir con sus <br> objetivos y alcanzar resultados.
                </h4>
                <div class="row">
                    <div class="col-offset-4 col-4">
                        <button type="button" class="btn btn-outline-dark prueba">Descubre cómo</button>
                    </div>
                </div>
            </div>
            <div class="col-1 ">
            </div>
            <div class="col-4 ">
                <?php
                echo $this->Html->image('ciclo-estrategia-seadog.png', array('alt' => 'Proceso', 'key' => 'imgProcess',
                    'class' => 'lang'));
                ?>
            </div>
        </div>
    </div>
</div>

Esto iria al final de la pagina

 <div class="ensayo">
    <br>
    <br>
    <br><br><br><br><br><br><br><br>
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno.
    Aqui iria el codigo donde estan los integrantes del equipo seadog, ya sean fotos o informacion de cada uno. 
</div>

Preguntado por: Andrés Vélez

Puedes esconder el div y mostrarlo cuando se de click en el enlace que tu elijas y luego hacer scroll hasta el div deseado.

Un ejemplo funcional (los estilos los agregué para el ejemplo), en el javascript adaptas tus elementos:

$('.show-more').on('click', function(event) {
  event.preventDefault();

  // Tomamos una referencia del elemento a mostrar
  var $ensayo = $('.ensayo');

  // Quitamos la clase d-none que lo mantiene oculto
  $ensayo.removeClass('d-none');

  // Hacemos scroll al div deseado
  $('html,body').animate({
    scrollTop: $ensayo.offset().top
  }, 'slow');
});
.principal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="principal bg-success text-white text-center">
  <h1>Soy lo único por ahora</h1>
  <a href="#" class="text-white show-more">Muestrame más...</a>
</div>
<div class="ensayo d-none">
  <div class="p-5">
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
  </div>
</div>

Fuente

Add a Comment

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