JQuery - ayuda scroll animado a un ancla

 
Vista:

ayuda scroll animado a un ancla

Publicado por manu (5 intervenciones) el 15/03/2013 20:44:45
Hola buenas:
Tengo el siguiente problema y agradeceria alguna ayuda....
Tengo el siguiente codigo (mas o menos):

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
<a href="#uno" >uno</a>
<a href="#uno" >dos</a>
<a href="#uno" >tres</a>
<a href="#uno" >cuatro</a>
 
<div id="contenido">
     <section id="uno">
          xxxxxxx
          xxxxxx
          xxxx
          xxx
      </section>
  <section id="dos">
          xxxxxxx
          xxxxxx
          xxxx
          xxx
      </section>
  <section id="tres">
          xxxxxxx
          xxxxxx
          xxxx
          xxx
      </section>
  <section id="cuatro">
          xxxxxxx
          xxxxxx
          xxxx
          xxx
      </section>
</div>


y el siguiente codigo jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
      $target = $(this.hash);
	   $target2 = $(this.hash);
      $target = $target.length && $target
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1000);
       return false;
      }
    }
  });


esto me funciona si los section los pongo fuera del div, pero yo lo que quiero es hacer el scroll
dentro de ese div y no se como.... Alguien me puede ayudar?

gracias.
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
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

ayuda scroll animado a un ancla

Publicado por xve (673 intervenciones) el 16/03/2013 13:54:42
Hola Manu, me cuesta un poco seguir tu código de jquery, ya que hay muchas variables que no informas que son o de donde vienen, pero si lo único que deseas en poner barras de desplazamiento en un div dado, eso se hace en css utilizando overflow...
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Coméntanos, ok?
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

ayuda scroll animado a un ancla

Publicado por Manu (5 intervenciones) el 16/03/2013 15:26:21
Xve muchísimas gracias, no No quería poner barras. Me explique mal , pero la buena noticia es q
Ya solucione el tema y sigo adelante con la web,si alguien quiere ver los
Avances puede entrar en www.resfinal.alziweb.com y si alguien
Quiere q explique como se hace q me lo diga, yo encantado
De poder ayudar.
Un saludo.
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
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

ayuda scroll animado a un ancla

Publicado por xve (673 intervenciones) el 16/03/2013 18:10:07
Hola Manu, nos puedes comentar a que te referías... y si puedes mostrar como lo has solucionado por si otro usuario tiene el mismo problema...
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

ayuda scroll animado a un ancla

Publicado por manu (5 intervenciones) el 16/03/2013 23:49:45
Hola:
Lo primero pedir disculpas si no me he explicado bien..
Lo que buscaba es lo que podeis ver en el siguiente link:
http://www.resfinal.alziweb.com
Como veis el contenido central son 4 <section> dentro de un div (podrian ser 4 div's dentro de un div principal). y lo que buscaba es hacer el scroll animado en esa parte central de la forma que podeis ver si vais pulsando los botones "uno, dos , tres y cuatro".

Como lo he conseguido:
1.º bajar el siguiente archivo.
http://scripterlative.com/files/softdivscroll.htm#
darle a donde pone "To Download the Script File with Instructions, Click Here."
se bajara un archivo con extension "j_s", teneis que cambiar la extension por "js" y ya teneis el archivo javascript que hace funcionar todo esto...

2.- dentro os pone como hacerlo funcionar , pero voy a explicarlo aqui yo o al menos intentarlo (siento extenderme tanto).

3.- enlazar el archivo javascript (dentro del head).
1
<script type='text/javascript' src='softdivscroll.js'> </ script>



4.- antes de </body> teneis que poner esto :
1
2
3
4
5
<script type='text/javascript'>
 
   obj = new SoftDivScroll('scrollDiv');
 
  </script>


TENER EN CUENTA QUE TENEIS QUE CAMBIAR "scrollDiv'" POR EL ID DEL DIV QUE CONTIENE LOS SECTION (perdon por las mayusculas).

5.- Los "section" tienen que tener un atributo "id" con el nombre del ancla.

ejemplo: <section id="uno">

6.- crear los enlaces (en mi caso yo hice botones).

<a class="enlace" name="uno">uno</a>

Le he dado una clase con el nombre enlace para luego llamar a la funcion al hacer click en los enlaces con clase enlace que son los de mi menu.

7.- insertar el siguiente codigo en el document.ready....

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(e) {
 
  ir.go('uno');
 
  	 $(".enlace").click(function() {
               var oID = $(this).attr("name");
				ir.go(oID);
                });
 
});


lo que hago aqui es :
primero: con "ir.go("uno")" es que al recargar la pagina siempre muestre el section "uno".

segundo: cada vez que se haga click en los elementos con clase "enlace" ejecutaremos la funcion la cual da a "oID" el valor de "name" y seguidamente ejecutamos el metodo del objeto "ir "->"ir.go(oID)" el cual hace el scroll animado hasta el section seleccionado...

Si no me he explicado bien lo lamento, lo he intentado explicar lo mejor posible... si alguien aun asi tiene alguna duda y puedo ayudarle no duden en mandarme un mail o preguntarme por aqui..

Un saludo.
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

ayuda scroll animado a un ancla

Publicado por manu (5 intervenciones) el 17/03/2013 06:56:30
Perdon solo un comentario, en el punto 4, creo el objeto "obj" ... con lo que en el punto 7 en vez de poner "ir.go("uno") e ir.go(oID) " tienen que poner obj.go("uno") y obj.go(oID), es decir delante de .go() siempre pondremos el nombre del objeto que creamos en el punto 4
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
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

ayuda scroll animado a un ancla

Publicado por xve (673 intervenciones) el 17/03/2013 20:23:10
Hola Manu, muchas gracias por comentarlo, de verdad muy agradecido!!!
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

ayuda scroll animado a un ancla

Publicado por Manu (5 intervenciones) el 17/03/2013 21:21:36
xve nada, un placer , ojala pudiera ayudar mas... quiero seguir este foro , espero con ello aprender, ser ayudado y ayudar en todo lo que se pueda... un saludo.
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