MiniTip: Desplazarse hasta un Anchor usando “animate” (diferentes navegadores)

Esto es muy interesante así que he pensado que sería bueno ponerlo en un post, sobre todo porque he encontrado la solución de rebote y en un post que no tenía nada que ver con lo que estaba buscando.

Tengo una pantalla hecha con AngularJS, con sus anchor, y una directiva para ir a los anchor desplazándose progresivamente. Ahora mismo no recuerdo por qué lo hice así pero usar los anchor a pelo con Angular me dio bastantes problemas así que tiré de directiva:

app.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
var idToScroll = attrs.href;
$elm.on('click', function(event) {
event.preventDefault();
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = $elm;
}
$("body").animate({scrollTop: $target.offset().top}, "fast");
return false;
});
}
}
});

Y en el html simplemente añadí la directiva, y el resto funciona igual que un anchor normal:

<a scroll-on-click href="#menu" data-translate="help.initMenu"></a>
<a id="menu"></a>

De primeras, esto no funciona ni en Firefox ni en Internet Explorer. Y dices, bueno, en IE no funciona porque no soporta animaciones, ¿pero y Firefox?.
Y resulta que la llamada a animate no funciona porque cada navegador “funciona diferente“. Chrome y Safari llaman a animate desde $(‘body’), pero Firefox e Internet Explorer lo hacen desde $(‘html’).

La solución para que funcione con ambos es tan simple como escribir:

$('html, body')

y que cada navegador utilice el que necesite.

Como siempre, espero que esta entrada pueda ser de utilidad para alguien. Y si no, pues también como siempre, aquí tenéis un gato para compensar:

kitty-meme_o_307136

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *