JQuery - Boton para ir a inicio dentro de una ventana con scrollbar

   
Vista:

Boton para ir a inicio dentro de una ventana con scrollbar

Publicado por Sam (31 intervenciones) el 22/05/2014 15:32:42
Hola amigos verán:

Tengo un documento web "madre" en el que aparece una ventana "hija" donde aparece contenido mediante un scrollbar personalizado y todo eso con jquery + javascript + css


y funciona bien, pero... necesito que en el contenido de la ventana "hija" donde sale la informacion con el scrollbar, al final, abajo del todo haya un boton que al pincharle suba al inicio arriba del todo de la ventana hija.


Y lo he intentado pero no me funciona, solo me funciona el boton cuando lo coloco en el documento "madre".

Y no entiendo por que pasa esto, alguien podria ayudarme?

Gracias de antemano este es el codigo que estoy utilizando:

Documento madre:


Código Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
 
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
 
(function($){
    $(window).load(function(){
 
        $(".contenedor_opcs").mCustomScrollbar({
            scrollButtons:{
                enable:true
            },
            theme:"dark (dark colored scrollbar)"
        });
 
    });
})(jQuery);


Y para el boton para subir este codigo siguiente pero solo funciona si lo pongo en el archivo madre, si lo pongo en la ventana "hija "donde sale la informacion no sale y no se porque.

Código Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
 
    $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#content'});
 
    $('.ancla').click(function(){
        var link = $(this);
        var anchor  = link.attr('href');
        $('html, body').stop().animate({
            scrollTop: jQuery(anchor).offset().top
        }, 2000);
        return false;
    });
});


Código HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="contenedor_opcs">
 
<h1 id="inicializando">Ya estoy en el inicio</h1>
 
<pre>
 
bla, bla, bla...
 
 
</pre>
 
<a href="#inicializando" class="ancla">Ir a inicio</a>
 
</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