Angular js - $ anchorScroll lisse / durée

Question

Salut lecture angulaire Js doc Je ne sais pas si anchorScroll $ peut avoir une durée option / assouplissement pour lisser défilement des éléments.

il dit seulement:

 $location.hash('bottom');

    // call $anchorScroll()
    $anchorScroll();
 

Puisque je n’utilise pas jquery et que je ne veux pas en fait , existe-t-il un moyen simple et astucieux de créer ou d’étendre $anchorScroll pour un défilement plus fluide?

Merci

Answer 1

Malheureusement, ce n'est pas possible à l'aide d' $anchorScroll. Comme vous l'avez découvert $anchorScroll n'ont pas d'options et ne fonctionne pas avec $ngAnimate. Afin d'animer le défilement, vous devez utiliser votre propre service/de l'usine ou de tout droit de javascript.

Pour des raisons d'auto-apprentissage, j'ai mis en place un exemple avec un défilement fluide de service. Il y a probablement de meilleures façons de faire cela, donc la rétroaction est encouragée.

Pour faire défiler jusqu'à un élément que vous joindre à une ng-click="gotoElement(ID)" de n'importe quel élément. Je pense que une encore meilleure serait de faire de cette directive.

Voici l' exemple de travail sur jsFiddle.

Answer 2

Vous pouvez également utiliser le lien angular-scroll, " https://github.com/dured/angular-scroll/ ". Il s'agit d'un défilement régulier et de quelques fonctions d'assouplissement permettant d'obtenir un aspect professionnel.

Answer 3

La réponse de Brett a très bien fonctionné pour moi. J'ai fait quelques petites modifications sur sa solution en termes de modularité et de la testabilité.

Ici, c'est encore un autre exemple de travail sur JsFiddle qui comprend l'autre version avec les essais inclus.

Pour les tests, je suis en utilisant le Karma et de Jasmin. La Signature a été légèrement modifié comme suit:

 anchorSmoothScroll.scrollTo(elementId, speed);

Où est l'élément est un attribut obligatoire de faire défiler et de la vitesse est facultative lorsque la valeur par défaut est de 20 (comme c'était le cas auparavant).