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

Related Posts:

¿Cómo obtener la respuesta de una llamada asíncrona (AJAX) fuera de ella? – javascript jquery asincrónico
Pregunta: Actualmente tengo esta función: function devuelveButaca(posicion){ var array = posicion.split('_'); var row = array; var column ...
Evitar múltiples toggle con misma clase – javascript
Pregunta: Para un evento toggle con puro javascript lo desarrollo de la siguiente forma: Javascript // Esta clase lo expande. const expandButton = document.querySelector('.expand-button'); expandButton.addEventListener('click', ()=> { ...
Validación de datos nulos en una función – javascript
Pregunta: Tengo la siguiente función pero al momento validar todos mis datos me los registra todos a excepción del los "containers" que son grids y ...
Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Error de: Uncaught TypeError: url.indexOf is not a function por Jquery – javascript jquery
Pregunta: En el navegador, reviso en inspeccionar elemento, y me sale el siguiente error: Uncaught TypeError: url.indexOf is not a function Me imagino que es ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
Uso de js y c# en unity. ¿Igual rendimiento? – javascript c# unity3d
Pregunta: Estoy comenzando con unity . Y veo que se pueden usar c# y js para programar. Mi pregunta es si tanto c# como js ...
¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Agregar marcador especifico a una localización Google Maps – javascript google-maps
Pregunta: ¿Cómo podría añadir un marcador personalizado en Google maps? Actualmente el código que tengo es el siguiente: var locations = [ ['Bondi Beach', -33.890542, ...
Usar variable en otra función con javascript – javascript html app
Pregunta: Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa. Enlace a la pagina AQUI El valor elegido en ...
Ocultar y Mostrar con Mapa de Google – javascript c# asp.net
Pregunta: Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona. Este es el ...
Copiar valor a un input que esta dentro de un footer de un datatable – javascript jquery datatables
Pregunta: Estoy usando los DataTables de jQuery y me estoy encontrando con el siguiente problema: cuando pulso en un botón necesito pasarle un valor con ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
convertir array a Map en javascript – javascript map nodejs
Pregunta: quiero convertir un arreglo a Map(), en este console "console.log(arrayParaMap);" sale undefined el ejemplo que uso es este //example {a:1,a:2,a:1,b:1,b:5,b:6} el map que prentendo obtener es ...

Add a Comment

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