2
  • La pregunta es como manipulo el scroll de un div ???; tomando encuenta que esto es modals y usa fixed para abarcar toda la pantalla y todo e contenido que abarque *

$(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>

5
  • ¿Puedes crear con este código un ejemplo mínimo, completo y verificable? Commented el 25 abr. 2017 a las 22:26
  • Listo hay esta amigo
    – Gamez
    Commented el 25 abr. 2017 a las 22:32
  • Porque no me funciona el script ??, Que paso aqui ??
    – Gamez
    Commented el 25 abr. 2017 a las 22:34
  • Prueba de nuevo agregando las referencias, asegúrate de incluir todas las que necesites. Ejecuta el código del snippet antes de guardar. Commented el 25 abr. 2017 a las 22:35
  • listo si tienes una duda me dices, por cierto el boton subir no aparece en el modals con el es que busco poder resolver el problema ya que el modals tiene su scroll y el body no; ya que asi lo indique en el script. El problema es como manipulo un scroll de un modals para hacer una funcion con un boton para desplazarme hasta arriba
    – Gamez
    Commented el 25 abr. 2017 a las 22:56

1 respuesta 1

1

El código que compartes está (casi) bien. Sólo tienes que corregir un par de errores para que funcione todo sin problemas:

  • En el CSS: tienes que añadir unidades a cualquier valor que no sea 0. Por eso el botón .subir_poster no se termina de ver bien.
  • En el JS: te faltan unas comillas para seleccionar bien el modal (ahora mismo se selecciona la variable showing_information que no existe, cuando se debería usar el literal ".showing_information" en su lugar).

Con esos dos cambios, tu código ya funciona:

$(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: 40px;
  position: fixed;
  bottom: 30px;
  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>

2
  • Gracias amigo ..
    – Gamez
    Commented el 27 abr. 2017 a las 13:13
  • amigo hay un detalle y es cuando recien entras al Modals el boton se encuentra vsible estando en 0 de top
    – Gamez
    Commented el 27 abr. 2017 a las 16:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.