JQuery - Empezar scroll al inicio con scrollbar jquery

 
Vista:

Empezar scroll al inicio con scrollbar jquery

Publicado por sam (46 intervenciones) el 12/06/2014 21:05:54
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



// inicialmente aparece la primera opcion marcada
var ultimo=1;
$(document).ready(function(){
// evento que se ejecutara al seleccionar cualquier opcion del menu
$(".btns_menu div").click(function(){
// obtenemos el nuevo id
nuevo=$(this).attr("id");
if(nuevo!=ultimo)
{
// escondemos el ultimo id
$("#opc_"+ultimo).fadeOut(function(){
$("#"+ultimo).removeClass("seleccionado");
$("#"+nuevo).addClass("seleccionado");
// mostramos el nuevo id
$("#opc_"+nuevo).fadeIn();
ultimo=nuevo;
});
}
});
});



body {background-color:#666666;}

.contenedor_opcs {

display:none;

overflow:auto;
padding-right:40px;

margin-top:70px;
margin-left:48px;

width:898px;
height:260px;

}

.cursor {cursor:pointer; cursor:hand;}



$(document).ready(function() {

$(".contenedor_opcs").niceScroll({touchbehavior:false,cursorcolor:"#555452",cursoropacitymax:0.7,cursorwidth:5,background:"none",autohidemode:false});

});




<div class="btns_menu">

<div id="1" class="cursor">Boton Inicio</div>

<div id="2" class="cursor">Boton Lorem ipsum</div>

</div>



<br/>
<hr/>
<br/>



<div id="opc_1" class="contenedor_opcs" class="seleccionado" style="display:block;">

contenido inicio (vacio)

</div>



<div id="opc_2" class="contenedor_opcs">

contenido de Lorem ipsum

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.

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.

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.

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.

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.

</div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Empezar scroll al inicio con scrollbar jquery

Publicado por sam (46 intervenciones) el 13/06/2014 08:28:08
Hola xve, en realidad esta ordenado el codigo es solo que le falta la etiquetas <script> , <html> etc.

Te lo pondre asi de nuevo para que sea mas lejible, disculpa.


En referente a que no sabes a lo que me refiero que me pasa te lo comento de otra manera.

Es que cuando doy la boton que contiene el div con un texto cualquiera y su correspondiente scrollbal.

este scrollbar funciona, si.

Pero si lo dejo posicionado por la mitad (por ejemplo.)

Si salgo de ese div y vuelvo a entrar, el cursor del scrollbar me lo encuentro donde lo deje la ultima vez .

Es decir que si me lo deje por en medio o por la zona mas baja pues ahí es donde me lo encuentro cuando entro por segunda vez.

Y lo que necesito es que el scrollbar esté posicionado por defecto, cada vez que entre en la opción, al inicio, arriba del todo. Sin necesidad de darle a ningún botón para posicionarlo arriba del todo.

Espero haberlo explicado mejor.

Ahora aquí el código, mas claro :

Y gracias de antemano.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
 
 
<head>
 
<!--MOSTRAR-OCULTAR OPCIONES MEDIANTE FADE IN Y OUT============================-->
 
 
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 
<script>
 
// inicialmente aparece la primera opcion marcada
var ultimo=1;
$(document).ready(function(){
// evento que se ejecutara al seleccionar cualquier opcion del menu
$(".btns_menu div").click(function(){
// obtenemos el nuevo id
nuevo=$(this).attr("id");
if(nuevo!=ultimo)
{
// escondemos el ultimo id
$("#opc_"+ultimo).fadeOut(function(){
$("#"+ultimo).removeClass("seleccionado");
$("#"+nuevo).addClass("seleccionado");
// mostramos el nuevo id
$("#opc_"+nuevo).fadeIn();
ultimo=nuevo;
});
}
});
});
 
</script>
 
 
 
<style>
 
body {background-color:#666666;}
 
.contenedor_opcs {
 
display:none;
 
overflow:auto;
padding-right:40px;
 
margin-top:70px;
margin-left:48px;
 
width:898px;
height:260px;
 
}
 
.cursor {cursor:pointer; cursor:hand;}
 
 
</style>
 
 
 
<!-- SCROLLBAR DE OPCS PERSONALIZADO ==================================-->
 
<script src="js/jquery.nicescroll.min.js"></script>
 
<script>
 
$(document).ready(function() {
 
$(".contenedor_opcs").niceScroll({touchbehavior:false,cursorcolor:"#555452",cursoropacitymax:0.7,cursorwidth:5,background:"none",autohidemode:false});
 
});
 
</script>
 
</head>
 
 
<body>
 
<div class="btns_menu">
 
<div id="1" class="cursor">Boton Inicio</div>
 
<div id="2" class="cursor">Boton Lorem ipsum</div>
 
</div>
 
 
 
<br/>
<hr/>
<br/>
 
 
 
<div id="opc_1" class="contenedor_opcs" class="seleccionado" style="display:block;">
 
contenido inicio (vacio)
 
</div>
 
 
 
<div id="opc_2" class="contenedor_opcs">
 
contenido de Lorem ipsum
 
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.
 
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.
 
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.
 
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.
 
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.
 
</div>
 
 
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar