2009-07-23 22 views
14

Así que estoy desesperadamente tratando de obtener alguna funcionalidad de desplazamiento para trabajar en una página. Después de no tener suerte, decido simplemente pegar window.scrollTo(0, 800); en mi página para ver si puedo hacer que ocurra algún desplazamiento. Nada sucede Tengo un acordeón que se expande y luego quiero desplazarme a un elemento específico con él. Pero por ahora me gustaría ver el desplazamiento de la cosa. ¿Alguien se encuentra con esto?Método JavaScript scrollTo no hace nada?

Gracias!

+0

Debo señalar que he probado el plugin scrollTo JQuery sin tener suerte allí también. $ .scrollTo (0,800); – Nick

+3

En firefox en mi barra de direcciones acabo de poner javascript: window.scrollTo (0, 800); y pareció funcionar. – Davis

+0

bien, a. Pruébalo en diferentes navegadores, mira si funciona en alguno. segundo. Pruebe algo como document.body.scrollTo. do. recuerde que JavaScript es sensible a mayúsculas y minúsculas. No estoy seguro de si alguno de estos te ayudará, pero puedes intentarlo. –

Respuesta

14

Pude resolver este problema usando el método jQuery animado(). Aquí hay un ejemplo de la implementación con la que fui:

$('#content').animate({ scrollTop: elementOffset }, 200); 

El selector está obteniendo el div con ID = "contenido". Entonces estoy aplicando el método animado con scrollTop como una opción. El segundo parámetro es el tiempo en milisegundos para la duración de la animación. Espero que esto ayude a alguien más.

+1

Intenté las otras respuestas. Este es el único que también funcionó para mí. La diferencia es que utilicé '$ ('cuerpo'). Animado ({scrollTop: top}, 0);' donde 'top' es la variable que contiene la coordenada y en entero. –

-2

Bueno, obviamente no se desplazará si su página no es al menos (viewport.height - 800) alto. ¿Ves una barra de desplazamiento? De lo contrario, estás haciendo algo mal.

0

En primer lugar, ¿es la página lo suficientemente grande como para desplazarse (incluso si está en un iframe)? Si no, o no estás seguro, crea un div gigante, luego pon algo debajo. Intenta desplazarte hacia eso.

A continuación, si está desplazándose en un iframe, coloque su código en la misma página que el origen del marco. De esta manera, no tiene que preocuparse por obtener el documento o elemento específico en la otra ventana, lo que puede ser complicado. Oh sí, ¿estás seguro de que entiendes esa parte? Avanzar con Firebug puede ayudarte con eso.

Finalmente, ponga un punto de interrupción (usando Firebug) en la línea que se supone que causa el desplazamiento. ¿Llega a ese punto de quiebre? Si no, su código no se está ejecutando, y el desplazamiento no es su problema.

(I respondieron a esta, con el apoyo del contexto your earlier question.)

EDIT:

desplazamiento se realiza ventana por ventana. Si se encuentra en un marco que no puede desplazarse, nada se desplazará. Si desea que ese elemento en el marco se desplace, obtenga el desplazamiento de ese elemento a su ventana actual y agréguelo al desplazamiento del marco que lo contiene. Eso debería hacer el truco.

+0

Sí, la página tiene suficiente altura. Puedo ver la barra de desplazamiento. Sospecho que el problema tiene que ver con la composición de esta página. Debido a que este sitio fue creado antes de los días de las páginas maestras, tengo una página principal que contiene 2 marcos. La primera es una barra de navegación del encabezado y la otra es un área de contenido. Estoy asumiendo que esta es la razón por la cual el método scrollTo no parece funcionar. – Nick

+0

Sí, el desplazamiento se realiza ventana por ventana. si se encuentra en un marco que no puede desplazarse, nada se desplazará. y te volverás loco tratando de descubrir lo que está mal. oh ... – geowa4

3

que estaba teniendo el mismo problema hoy y entonces descubrí que cuando saqué el auto genera bloque de tipo de documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

El window.scrollTo (0800) comenzó a trabajar junto con el ExtJs scrollTo() Función Originalmente estaba tratando de usar. Volví a poner el bloque y dejó de funcionar. No sé si esto es con lo que te estabas metiendo (hace 2 años) pero espero que esto ayude a alguien más a encontrarse con el mismo problema.

21

Si usted tiene algo como esto:

html, body { height: 100%; overflow:auto; } 

Si tanto el cuerpo como HTML tienen una definición altura de 100% y también scrolling habilitadas, window.scrollTo (y todos los mecanismos de desplazamiento derivados) no funcionan, a pesar una barra de desplazamiento que se muestra (que puede ser utilizada por el usuario), cuando el contenido excede el 100% de la altura del cuerpo. Esto se debe a que la barra de desplazamiento que ve no es la de la ventana, sino la del cuerpo.

Solución:

html { height: 100%; overflow:auto; } 
body { height: 100%; } 
5

que corrige este problema con el uso de un setTimout. Estaba usando angularjs, pero tal vez también pueda ayudar con vanilla js.

 setTimeout(function() { 
      window.scrollTo(0, 300); 
     },2); 
+0

Esta debe ser la mejor respuesta. Gracias. – JulianSoto

1

verificación si su etiqueta donde se enchufa el desplazamiento conseguir un desbordamiento de CSS [/ - X-Y]: oculta. corrigió el error

0

A veces no es solo cuestión de css, para mí el navegador era el culpable. Tuve que resolverlo con este código.

if ('scrollRestoration' in window.history) { 
    window.history.scrollRestoration = 'manual' 
} 

Le permite al desarrollador hacerse cargo de los cambios de desplazamiento. Lea más al respecto here

Cuestiones relacionadas