JQuery: scrollTo no me funciona =S... cual es el problema?

#1 (**permalink**) 02/01/2010, 06:58

Hola, creo que el codigo esta correcto... los JS importados tambien... son las ultimas versiones y no se cual sera el problema... ojala me puedan ayudar... les dejo el codigo SIMPLIFICADO, y aqui todo comprimido en ZIP: http://rapidshare.com/files/329229426/mi_scrollTo.zip.html (les recomiendo que vean esta ultima)

Lo que quiero hacer son anclas... en donde al hacer click en un titulo el scroll baje directamente hasta el div... de forma animada y con un rebote... efecto bounce.

Aqui esta lo que quiero hacer, es exactamente igual: http://demos.flesler.com/jquery/scrollTo/old/ (hagan click en el boton "button" del 1º ejemplo)
Muchas gracias =)

Código HTML:

<html>
<head>
<style type = "text/css">
.cuadro {
	font-family	: Trebuchet MS;
	font-size	: 14px;
	color		: white;
	background	: #222222;
	margin		: 10px;
	padding		: 5px;
}
</style>

<script type = "text/javascript" src = "../Frameworks/JQuery1.3.2.js"></script>
<script type = "text/javascript" src = "../Frameworks/JQuery.scrollTo1.4.2.js"></script>
<script type = "text/javascript" src = "../Frameworks/JQuery.easing1.3.js"></script>
</head>
<body>
<div name = "atajos" class = "atajos">
<a href = "JavaScript: $.scrollTo('#cuadro2', 800, {easing:'elasout'});">Ir a cuadro 2</a>
</div>

<br><br>

<div id = "cuadro" class = "cuadro">
AQUI MUCHO TEXTO
</div>

<br><br>

<div id = "cuadro2" class = "cuadro">
AQUI MUCHO TEXTO
</div>

<br><br>

<div id = "cuadro3" class = "cuadro">
AQUI MUCHO TEXTO
</div>
</body>
</html>

kreativodesigns · #2 (**permalink**) 02/01/2010, 10:10

necesariamente tiene que se con el efecto bounce ?
sino podrias simplemente utilizar un .animate() y pasarle el valor position() top del objeto al que quieras ir...

#3 (**permalink**) 02/01/2010, 12:41

Si, es que es eso lo que busco... el efecto bounce.
No se cual es el problema en el codigo... en otras paginas esta igual :S

Saludos!

mayid · #4 (**permalink**) 04/01/2010, 06:07

Tenes el bounce en el jquery UI:

http://docs.jquery.com/UI/Effects

Especificamente aqui: http://docs.jquery.com/UI/Effects/Bounce

Por otro lado, recomiendo alteres esta linea:

Cita:

<a href = "JavaScript: $.scrollTo('#cuadro2', 800, {easing:'elasout'});">Ir a cuadro 2</a>

Y uses esta:

Cita:

<a href = "#" onclick="$.scrollTo('#cuadro2', 800, {easing:'elasout'}); return false">Ir a cuadro 2</a>

#5 (**permalink**) 04/01/2010, 08:28

Mayid, para poder usar esos efectos debo bajar el JS JQueryIU.js no es asi? Pues baje la última versión (1.7.2). Ahora tengo una duda... el JQueryUI trae incorporado el JQuery convencional?, es decir, JQuery + JQueryUI?

Saludos!

mayid · #6 (**permalink**) 04/01/2010, 10:43

A la libreria jquery tenes que sumarle jqueryUI, mas jqueryUI Effects mas bounce.

Quedaria algo asi:

Cita:

Fijate en el paquete que descargaste, porque hay una carpeta que contiene todos los archivos .js Busca solo los que necesites y copialos en tu carpeta.

#7 (**permalink**) 04/01/2010, 19:31

Ok Mayid.

Oye, probe modificando la linea por esta:

Código HTML:

<a href = "#" onclick="$.scrollTo('#cuadro2', 800, {easing:'elasout'}); return false">Ir a cuadro 2</a>

Pero tampoco funciona el scrollTo... ni siquiera colocando:

Código HTML:

<a href = "#" onclick="$.scrollTo('#cuadro2', 800)">Ir a cuadro 2</a>

No logro indentificar cuál es el problema =/

Saludos y muchas gracias.

Dany_s · #8 (**permalink**) 05/01/2010, 06:04

yo uso el scrollto en una tabla y me funciona pero con lo que vos queres hacer no, pero al descargar el 1.4.2 desde http://plugins.jquery.com/project/ScrollTo si me funciona con tu código usando el comprimido, yo tampoco lograba identificar el problema jeje, siempre es bueno empezar todo desde 0 bajando todo otra vez jeje

mayid · #9 (**permalink**) 05/01/2010, 08:25

Me alegro se haya solucionado. Comentario aparte, sobre buenas costumbres de javascript:

Cita:

Pero tampoco funciona el scrollTo... ni siquiera colocando:

Cita:

Código HTML:
<a href = "#" onclick="$.scrollTo('#cuadro2', 800)">Ir a cuadro 2</a>

Esto funciona solo si agregas return false, como en el ejemplo que te di. Con esa linea evitas que el enlace se dispare, y en cambio logras ejecutar javascript en el lugar en el que le corresponde, que no es el de href... sino el de un evento (ej. onclick)

#10 (**permalink**) 06/01/2010, 07:41

Excelente! Me resultó retornando falso al final de la instrucción y usando en JQuery.scrollTo1.4.2-min.js ;)

Ahora tengo que agregarle el efecto "bounce".

Tengo unas dudas:
1. ¿Qué función cumple el: {easing:'elasout'} en el código?
2. ¿Cuál es la diferencia entre el JQuery.scrollTo y el JQuery.scrollTo-min? (He visto varios FrameWorks con 2 versiones, la standart y la min)

Muchas gracias colegas, saludos! =)

mayid · #11 (**permalink**) 06/01/2010, 11:01

Cita:

2. ¿Cuál es la diferencia entre el JQuery.scrollTo y el JQuery.scrollTo-min? (He visto varios FrameWorks con 2 versiones, la standart y la min)

El min es el mismo codigo pero esta comprimido, por lo cual "carga mas rapido en el navegador".

Sobre lo otro, no se.

#12 (**permalink**) 06/01/2010, 14:26

Cita:

El min es el mismo codigo pero esta comprimido, por lo cual "carga mas rapido en el navegador"

Pero el min no trae menos funciones?
Porque si trae las mismas es obvio que es mejor usar la min.

Disculpen mi ignorancia y les agredezco su tiempo invertido.

Saludos colegas!

mayid · #13 (**permalink**) 06/01/2010, 14:34

Cita:

Pero el min no trae menos funciones?

Ah! Me olvidaba de decirte. Comprimir significa quitar espacios en blanco, basicamente. Es decir que no cuentan como bytes.

Abri uno y fijate.

#14 (**permalink**) 06/01/2010, 16:20

ok ;)
Entendido.

Haré lo del efecto bounce... cualquier cosa les preguntaré.
Muchas gracias otra vez.

silvihum · #15 (**permalink**) 03/06/2013, 10:47

Hola!
Tengo el mismo problema y no hay forma de que vea que es lo que pasa... He seguido todos los pasos y he probado todos los consejos pero no lo logro. Podéis ayudarme?

Esta es la web: http://silviagilmoreno.com/
La idea es que el icono del dedo te desplace a la parte inferior.

Muchas gracias de antemano! :)