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:
