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

Anuncios