¿Hay alguna manera simple de forzar al navegador para que se desplace hacia la parte superior si se hace clic en un botón?Desplácese hasta la parte superior de la página
He tratado
jQuery('html').scrollTop();
jQuery('body').scrollTop();
jQuery(window).scrollTop();
Ninguno de ellos parece desplazarse a la parte superior de la página.
Debido a la extravagancia del navegador cruzado, algunos navegadores responderán a 'html' y algunos a 'body'. Y tal vez sea solo mi suerte, pero .scrollTop(0) nunca funcionó para mover la página. Dale una oportunidad:
jQuery('html,body').animate({scrollTop:0},0);
Esta versión ha sido probada y cruzada de navegador para todos los navegadores de escritorio y dispositivos móviles.
Esto funcionó como un encanto. No pude hacer que se rompa en FF, IE o Safari. Todavía no he revisado Chrome. ¡Gracias! –
Por cierto, también he probado este código. Esto funciona para mi. Pero estaba pensando que los trucos de css son un gran nombre y puede ser que hayan puesto un código largo por una razón :) Gracias por aclarar :) Me encantó la respuesta del mario también :) – Jashwant
CSS tricks es un blog roquero, del cual he aprendido mucho, pero todavía estoy en desacuerdo con ellos a veces;) – Fresheyeball
Puede utilizar cualquiera de esto:
jQuery('body').scrollTop(0);
o esto:
jQuery(window).scrollTop(0);
o, finalmente esto:
jQuery('html').scrollTop(0);
Por lo tanto, con el fin de llamar al método scrollTop y hacer que su desplazarse por la página debe pasar un argumento con el valor numérico que representa la posición scrollTop . De lo contrario, funcionará como si necesitara obtener la posición scrollTop.
Dos últimos métodos deberían funcionar constantemente en todos los navegadores, mientras que el primero podría no funcionar en algunas versiones de IE.
No pude hacer que 'body' funcionara, pero 'html' funcionó siempre y cuando pasara a 0. ¿Sabe si estos son cross browser o en qué versión este método no funcionará por casualidad? –
@JamesWilson Vea mi respuesta para una solución simple de navegador cruzado. – Fresheyeball
@JamesWilson Realmente depende. Puede probar el método de Fresheyball pero sin animar, simplemente: 'jQuery ('html, body'). ScrollTop (0);' – VisioN
Ésta es la manera de navegadores,
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
var scrollElem = scrollableElement('html', 'body');
$(scrollElem).scrollTop(0);
Código de css-tricks
¿Sabes si este ID de método es mejor que el de Fresheyeball? ¿O hacen lo mismo en cuanto a la consistencia del navegador? –
@JamesWilson básicamente hacen lo mismo, excepto que este método pasa por el trabajo innecesario de determinar ''cuerpo'' o''html'' antes de usarlo. Francamente, es un gran código adicional para la solución. – Fresheyeball
javascript puro simple, también funciona en móviles
window.scrollTo(0,0);
Ya que nadie ha mencionado el HTML necesario Lo agregaré aquí.
En primer lugar crear su elemento de anclaje:
<a href="#" title="Scroll to Top" class="ScrollTop">Scroll To Top</a>
nota la clase hace referencia a la siguiente jQuery.
Publique sus jQuery:
$(document).ready(function(){
$('.ScrollTop').click(function() {
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
});
para ajustar la velocidad de la animación cambiar el valor "800".
Esto es porque [scrollTop()] (https://api.jquery.com/scrollTop/) en realidad no se desplaza por la página a menos que tenga un valor; sin un valor, solo devuelve un valor de píxel que representa la * posición de desplazamiento * como un desplazamiento desde la * parte superior * de la página. – Warpling