scrolltop con animate no funciona

Estoy tratando de animar durante el desplazamiento, pero la suerte con mi código…

Tengo este jquery

$(window).scrollTop(200);

Ahora quería dar un efecto de animación

Lo intentó, pero no funciona:

1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);

He aplicado esto en función de clic como este:

$('.goto').click(function(){
    $(window).scrollTop(485); //its working
});

Y ahora quiero dar el efecto de animar pero no funciona…

así?
Cómo es que no trabaja? Haga clic en ejecutar y usted sí la animación.
nope! en mi sitio……
Se puede hacer un JSFiddle?
Nota de actualización: usted no puede tener animate en $(window). Uso $('html,body') lugar. JSFiddle

InformationsquelleAutor Bhojendra Rauniyar | 2013-09-13

6 Comentarios

59

Tienes que utilizar $('html,body') en lugar de $(window) porque window no tiene un scrollTop propiedad.

JS:
```
$('#scroll-bottom').on('click', function() {
  $('html, body').animate({
    scrollTop: 2000
  }, 2000); //for all browsers
  
  //$('html').animate({scrollTop: 2000}, 2000); //works in Firefox and Chrome
  //$('body').animate({scrollTop: 2000}, 2000); //works in Safari
})
```
CSS:
```
#top {
  margin-bottom: 2000px;
}
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top">
  <button id="scroll-bottom">scroll</button>
</div>
<div>bottom</div>
```
- Nope! ‘cuerpo’ no funcionó para mí…
- Sí, en chrome y safari funciona para $('html,body') y $(body), pero en firefox funciona para $('html,body') y $(html). Obviamente el scrolltop tiene algunos problemas de compatibilidad del navegador. Sin embargo, el uso $('html,body'), que parece funcionar para ambos.
- Alguien sabe de una solución para dispositivos móviles así?
- Qué pasa si usted está en un modal/cuadro de diálogo y desea desplazarse a una parte específica dentro de esa sección? Nvm: stackoverflow.com/questions/16072895/…
- que raro, yo estoy usando Chrome v67.0.3396.99 y $(‘body’) no funciona… tengo que usar $(‘html, body’)
- Me has salvado, me hizo $('html') y mi cliente se quejó de que no funciona en safari. $('html, body') de las grandes obras.
InformationsquelleAutor Vucko
45

si usted tiene html y estilo de cuerpo height:100%; no su trabajo
uso
```
height: auto;
min-height: 100%;
```
- Gracias! El desplazamiento superior de la función no era de trabajo, a menos que me hizo esto.
- Impresionante! esto funciona perfecto. Tropezó con esto, el pensamiento muy tarde, pero encontré mi solución. Bravo!
- Gracias, también ayudó!
- Wow que raro… Había height:100% y que estaba causando todo tipo de extraños problemas de desplazamiento, especialmente en el móvil…
- Déjame adivinar, muchos de nosotros solíamos tener height: 100% porque de notas de pie de página de la técnica 🙂
- He iniciado sesión en stackoverflow cuenta de votar a favor de su respuesta!! gran. gracias
- Esto me salvó de la locura
- Te amo! Me salvó el día!
- Muchas gracias. Yo estaba jugando con mi js códigos. Pero que resolvió mi problema.
- Oh, gracias. Que rescate de mi vida. Funciona bien
InformationsquelleAutor Michal Orlík
0

sólo se necesita añadir píxeles
```
$('body').animate({ scrollTop: "300px" }, 1000);
```
- Véase mi edición me han testet et y funciona
- cambiar ventana de ‘el cuerpo’
InformationsquelleAutor Kimtho6

DEMO

<html>
function scrollmetop(dest){
    var stop = $(dest).offset().top;
    var delay = 1000;
    $('body,html').animate({scrollTop: stop}, delay);
    return false;
}

scrollmetop('#test');
<body>
    <div style="margin: 100px 100px 1000px 100px">
       <div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
    </div>
</body>
</html>

InformationsquelleAutor coder

0

Estoy usando Angular y estaba tratando de desplazarse a un elemento que se ha añadido en un ng-repeat. Pongo este código dentro de un $timeout (con cero tiempo, sólo para hacer que suceda después de que los elementos de la muestra) y esto fue suficiente para que el nuevo elemento a tener un offset().top…

…pero creo que fue demasiado, va a agregar docenas de nuevos elementos, por lo que no tienen el poder de procesamiento para desplazarse a animar. Cuando me puse el tiempo de espera de 1 segundo, funcionaba (aunque en realidad tomó 7 segundos antes de que el tiempo de espera llamaron).

Llegué a la conclusión de que la animación, desplazamiento suave de no estar realmente manejable aquí, y en su lugar estoy usando
```
document.body.scrollTop = entry.offset().top
```
InformationsquelleAutor MalcolmOcean
0

He tenido este problema así y se dio cuenta de que el problema estaba dentro de la CSS.

En mi caso, necesitaba quitar el overflow-x: hidden; de la etiqueta HTML.

Quitar:
```
html {
    overflow-x: hidden;
}
```
Entonces, funcionó.

Espero que ayude a alguien!

InformationsquelleAutor AlmostPitt

6 Comentarios

Dejar respuesta Cancelar respuesta