javascript - quantum - pushstate jquery
No puedo hacer que scrollTop() funcione tanto en Chrome como en Firefox (7)
Eliminar el estilo de altura del cuerpo, las etiquetas html. Agregue una identificación al div principal debajo del cuerpo, por ejemplo, #content, luego use el siguiente script. Como se $(document).scrollTop(); anteriormente, ejecute $(document).scrollTop(); en la consola del navegador y asegúrese de que devuelve un valor no 0.
$(''body, html'').animate({
scrollTop: $(''#content '').offset().top
}, 1000);
Estoy teniendo problemas para que el método scrollTop () funcione tanto en Firefox como en Chrome. Usé $(''body, html'').scrollTop(); Sin embargo, no funciona en Chrome. Sólo $(''body'').scrollTop(); Funciona en cromo. Cualquier pensamiento sería apreciado grandemente A continuación se muestra mi código.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
body {
height: 2000px;
}
#light {
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -200px;
width: 800px;
height: 400px;
background-color: blue;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id="light">
</div>
<!-- Used the google jQuery link for ease of use in this example -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
var offset = $(''body, html'').scrollTop();
var view = $(window).height();
var total = $(document).height();
var percent = 1-(offset / (total - view));
var widthFactor = 800*percent;
var marginFactor = -(400*percent)
if(percent > 0.33){
$("#light").css({ "width" : widthFactor,
"margin-left" : marginFactor});
};
});
});
</script>
</body>
</html>
Prueba este simple código javascript para el elemento de desplazamiento usando id
document.getElementById("id").scrollTop=0;
Prueba esto, este es el desplazamiento en la parte superior con la animación que se ve más efectiva
$("html, body").animate({ scrollTop: 0 }, 2000);
Demo Here
Tuve el mismo problema. La mejor solución para mí fue hacerlo en la window :
var offset = $(window).scrollTop();
Sin embargo, para que esto funcione, su cuerpo y los elementos html no pueden tener una height establecida al 100% . usa min-height lugar
EDITAR: el elemento HTML puede usar height: 100% , sin embargo, si necesita que el body estire a la altura completa, debe usar min-height: 100% lugar. De lo contrario, el scrollTop siempre devuelve "0"
Utilice el objeto de documento en su lugar
$(document).scrollTop();
Utilizó esta solución:
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)
Se suministra en esta respuesta en otro hilo: https://.com/a/33462363
No necesitas involucrar a jQuery y funciona bien para mí.
Utiliza el selector múltiple y devolverá una matriz de elementos DOM. ¿La función de obtención de llamadas de esta matriz parece indefinida en Chrome (las funciones de configuración deberían funcionar)?
De todos modos puedes usar $(''body'').scrollTop() || $(''html'').scrollTop() $(''body'').scrollTop() || $(''html'').scrollTop() en su caso.
O simplemente $ (documento) como se menciona en la respuesta de Justin.