$(document).ready(function(){
$('.see').click(function(e){
var title_poster_fixed = $(this).closest('.poster').find('.title_poster').html();
var all_paragraph = $(this).closest(".poster").find(".contents_paragraph").html();
$('.title_poster_fixed').html(title_poster_fixed);
$('.contents_paragraph_fixed').html(all_paragraph);
$('body').css("overflow","hidden");
$('.showing_information').addClass("active");
});
$('.exit-poster').click(function(){
$('.showing_information').removeClass('active');
$('body').css("overflow","auto");
});
// -------------------------------
$('.subir_poster').click(function () {
$('.showing_information').animate({
scrollTop: '0px'
},300);
$(showing_information).scroll(function () {
if ( $(this).scrollTop() > 0 ) {
$('.subir_poster').slideDown(300);
}else{
$('.subir_poster').slideUp(300);
}
}) ;// EL punto y coma lo pide el plugin
});
});
**Estructura y estilos del Div el cual tiene un scroll por su tamaño de alto**
/*■■■■■■■■■■■■■■■■■■■■■■■ SECTION BODY ■■■■■■■■■■■■■■■■■■■■■■■■■*/
.hgroup{text-align: center;padding: 40px 0px 30px;}
.poster{
width: 90%;
z-index: 1000;
font-size: 2rem;
padding-bottom: 5px;
margin-bottom: 2.9rem;
box-sizing: border-box;
background: rgb(242, 241, 242);
box-shadow: 0px 1px 2px hsla(360, 100%, 00%, 0.5);
}
.title_poster{
font-size: 1.5rem;
padding: 10px 0px;
text-align: center;
border-bottom: 1px solid hsla(360, 100%, 0%, 0.1);
}
.title_poster .title_poster_fixed{margin-top: 40px;padding: 20px;box-sizing: border-box;}
.contents_paragraph{
height: 205px;
overflow:hidden;
font-size: 1.2rem;
padding: 5px 15px 0px 15px;
}
.see{
padding: 7px;
cursor: pointer;
font-size: 1.2rem;
margin: 1rem 1rem;
text-align: center;
transition: all 0.3s;
border-radius: 1.25rem;
background: hsla(343,52%,26%,1);
}
.see:hover{
background: hsla(343,52%,21%,1);
}
.showing_information{
top: 0;
width: 100%;
height: 1000px;
z-index: 1001;
position: fixed;
box-sizing: border-box;
background: rgb(242, 241, 242);
display:none; /* escondido por defecto */
max-height:100%;
overflow:auto;
}
.showing_information.active {
display:block; /* lo mostramos si activo */
}
.contents_paragraph_fixed{
padding: 20px 20px 100px;
font-size: 1.2rem;
text-align: justify;
}
.contents_paragraph_fixed p{
display:block !important;
}
.exit-poster{
right: 40;
height: 35px;
padding-top: 10px;
}
.exit-poster,.subir_poster{
width: 60px;
color: white;
cursor: pointer;
position: absolute;
text-align: center;
transition: all .3s;
background: rgb(142, 57, 159);
}
.exit-poster:hover{
background: none;
color: rgb(142, 57, 159);
max-height: 100%;
box-shadow: 0px 1px 4px rgb(142, 57, 159) inset;
}
.subir_poster{
right: 40;
position: fixed;
bottom: 30;
opacity: 0.2;
padding-top: 10px;
z-index: 1002;
height: 40px;
font-size: 2rem;
}
.subir_poster:hover{
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<article class="poster">
<header class="title_poster">Historia</header>
<div class="contents_paragraph">
<p class="fonts-4 paragraph-short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
<p class="fonts-4" style="display:none;">exercitati 9999999 9999 on 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.</p>
<p class="fonts-4" style="display:none;">exercitati 9999999 9999 on 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.</p>
<p class="fonts-4" style="display:none;">exercitati 9999999 9999 on 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.</p>
<p class="fonts-4" style="display:none;">exercitati 9999999 9999 on 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.</p>
<p class="fonts-4" style="display:none;">exercitati 9999999 9999 on 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.</p>
</div>
<div class="see color-1">Ver más</div>
</article>
<article class="poster"> <!--// Poster = cartel -->
<header class="title_poster">Historia 2</header> <!--// title_poster = titulo del cartel-->
<div class="contents_paragraph"> <!--// contents_paragraph = Container del Parrafo-->
<p class="fonts-4 paragraph-short">Lorem 2 ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
<p class="fonts-4" style="display:none"> 44 exercitation 2 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.</p>
</div>
<div class="see color-1">Ver más</div>
</article>
<div class="showing_information"> <!--//showing_information = Mostrando Informacion-->
<article class="contents_information"> <!--// contents_paragraph = Container del Parrafo-->
<div class="exit-poster fonts-1">X</div> <!--// salir X -->
<header class="title_poster">
<div class="title_poster_fixed"></div>
</header>
<div class="contents_paragraph_fixed"></div>
<div class="subir_poster font-4">^</div>
</article>
</div>
</section>