Foros del Web » Programando para Internet » Jquery »

Empezar scroll al inicio con scrollbar jquery

Estas en el tema de Empezar scroll al inicio con scrollbar jquery en el foro de Jquery en Foros del Web. Hola amigos veran me pasa lo siguiente: Tengo un codigo que me permite dandole a un boton, aparecer un texto en un div con un ...
  #1 (permalink)  
Antiguo 12/06/2014, 12:50
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 5
Empezar scroll al inicio con scrollbar jquery

Hola amigos veran me pasa lo siguiente:

Tengo un codigo que me permite dandole a un boton, aparecer un texto en un div con un efecto fade in y fade out, y subir y bajar dicho texto con un scrollbar con efecto smooth

y funciona bien pero...

cuando le doy al boton y aparece el texto del contenido, y bajo hacia abajo con el scrollbar

y dejo el scrollbar por ahí en medio o por abajo de la ventana. Si le doy al boton de inicio y de nuevo le doy al boton del contenido del texto, el scrollbar no me aparece arriba del todo, que es donde me gustaria que estuviera, sino que aparece el scrollbar donde lo deje la vez anterior, osea por ahí en medio o donde lo hubiese dejado la vez anterior que entre.

Si alguien me pudiera ayudar le estaria muy agradecido.

este es el codigo:

jquery-1.10.2.min.js

jquery.nicescroll.min.js


Código Javascript:
Ver original
  1. // inicialmente aparece la primera opcion marcada
  2.         var ultimo=1;
  3.         $(document).ready(function(){
  4.             // evento que se ejecutara al seleccionar cualquier opcion del menu
  5.             $(".btns_menu div").click(function(){
  6.                 // obtenemos el nuevo id
  7.                 nuevo=$(this).attr("id");
  8.                 if(nuevo!=ultimo)
  9.                 {
  10.                     // escondemos el ultimo id
  11.                     $("#opc_"+ultimo).fadeOut(function(){
  12.                         $("#"+ultimo).removeClass("seleccionado");
  13.                         $("#"+nuevo).addClass("seleccionado");
  14.                         // mostramos el nuevo id
  15.                         $("#opc_"+nuevo).fadeIn();
  16.                         ultimo=nuevo;
  17.                     });
  18.                 }
  19.             });
  20.         });


Código CSS:
Ver original
  1. body {background-color:#666666;}
  2.  
  3.         .contenedor_opcs {
  4.            
  5.             display:none;
  6.            
  7.             overflow:auto;
  8.             padding-right:40px;
  9.  
  10.             margin-top:70px;
  11.             margin-left:48px;
  12.            
  13.             width:898px;
  14.             height:260px;      
  15.    
  16.             }
  17.    
  18.         .cursor {cursor:pointer; cursor:hand;}


Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.  
  3.           $(".contenedor_opcs").niceScroll({touchbehavior:false,cursorcolor:"#555452",cursoropacitymax:0.7,cursorwidth:5,background:"none",autohidemode:false});
  4.          
  5.         });



Código HTML:
Ver original
  1. <div class="btns_menu">
  2.  
  3.         <div id="1" class="cursor">Boton Inicio</div>              
  4.  
  5.         <div id="2" class="cursor">Boton Lorem ipsum</div>
  6.  
  7.     </div>
  8.  
  9.        
  10.  
  11.     <br/>
  12.     <hr/>
  13.     <br/>
  14.  
  15.  
  16.  
  17.     <div id="opc_1" class="contenedor_opcs" class="seleccionado" style="display:block;">
  18.  
  19.         contenido inicio (vacio)
  20.  
  21.     </div>
  22.  
  23.  
  24.                        
  25.     <div id="opc_2" class="contenedor_opcs">
  26.  
  27. contenido de Lorem ipsum
  28.  
  29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula aliquam purus. Duis blandit egestas ipsum a faucibus. Nulla sit amet fermentum nisl, ut dignissim diam. Donec vel aliquet justo, sit amet consequat arcu. Duis sit amet ipsum nisi. Curabitur rhoncus pretium bibendum. Sed blandit nisi nec ligula iaculis venenatis. Vivamus elementum, urna eu condimentum ullamcorper, nisl elit cursus dolor, sit amet sagittis justo quam et est. Aliquam erat volutpat. Quisque feugiat tincidunt massa, sit amet blandit massa pellentesque quis. Pellentesque porta ut quam et hendrerit.
  30.  
  31. Integer luctus convallis adipiscing. Fusce ut ornare ante. Nulla facilisi. Suspendisse a molestie nisl. Nullam vel nulla tincidunt, eleifend urna vitae, auctor tellus. Proin sollicitudin neque et porta vestibulum. Nunc et nulla a est aliquam sagittis id non purus. Duis nulla est, blandit vel dapibus vel, tempor eu eros. Ut tristique nibh lectus, vitae molestie nibh tempus id. Donec accumsan volutpat elementum. Donec eget massa lobortis, rutrum ligula nec, convallis lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  32.  
  33. Donec massa nulla, ultricies id mattis sit amet, sodales nec quam. Sed ligula magna, condimentum eu facilisis non, luctus euismod libero. Mauris ac adipiscing magna. Nunc semper sapien arcu, ac rhoncus ligula molestie in. Proin ut tempor magna, a volutpat nunc. Quisque suscipit lacus non urna pellentesque hendrerit. Proin sapien libero, ornare cursus arcu at, sagittis euismod nisl.
  34.  
  35. Vestibulum gravida rutrum libero sollicitudin adipiscing. Suspendisse ligula elit, consequat at turpis id, vehicula lacinia lorem. Aenean imperdiet lobortis elit in lobortis. Nullam vulputate iaculis est, quis viverra augue ultricies nec. Curabitur ut egestas risus, non ultrices ligula. Donec tempor facilisis diam. Nulla condimentum sagittis sem eget volutpat.
  36.  
  37. Vestibulum turpis magna, fringilla eu urna id, porttitor sagittis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent vulputate accumsan lectus, eu accumsan massa luctus posuere. Fusce vestibulum massa est, vehicula vehicula risus vulputate tempor. Donec egestas aliquet felis, vel adipiscing felis imperdiet quis. Curabitur non suscipit elit. Suspendisse accumsan lectus ligula, sit amet dapibus lorem rutrum vel. Cras quis dignissim leo. Integer gravida leo quis mi bibendum, non dapibus dui eleifend. Pellentesque ultricies scelerisque fringilla.
  38.  
  39.     </div>
  #2 (permalink)  
Antiguo 12/06/2014, 13:29
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Empezar scroll al inicio con scrollbar jquery

Yo suelo hacer eso con esto:

Código HTML:
Ver original
  1. <label>Subir</label>

Código Javascript:
Ver original
  1. $(window).scroll(function(){
  2.     if ($(this).scrollTop() > 0)
  3.         $("label").fadeIn("slow");
  4.     else
  5.         $("label").fadeOut("slow");
  6. });
  7.  
  8. $("label").click(function(){
  9.     $("body, html").animate({
  10.         scrollTop: 0
  11.     }, 1000);
  12. });

Estando originalmente oculto el <label>. Cuando se hace scroll, se verifica la cantidad de píxeles desplazados; si esta cantidad es mayor a cero, hago aparecer al <label>, caso contrario, lo oculto. Cuando le de clic, desplazo a la barra de desplazamiento hasta el tope, con un retardo de 1 segundo, dándole así ese efecto de desplazamiento suave.

Demo

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 12/06/2014, 15:57
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 5
Respuesta: Empezar scroll al inicio con scrollbar jquery

Si, si lo que me comentas que haces esta bien.

Pero el asunto es que cuando vuelva a entrar en la opcion, esté el scrollbar por defecto arriba del todo.

y no que haya que subirlo con otro botón.

Espero que se entienda ahora mejor.

Etiquetas: empezar, inicio, scroll, scrollbar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:40.