Fonction ScrollTo en AngularJS

c'est une meilleure directive au cas où vous voudriez l'utiliser:

vous pouvez faire défiler jusqu'à n'importe quel élément de la page:

.directive('scrollToItem', function() {                                                      
    return {                                                                                 
        restrict: 'A',                                                                       
        scope: {                                                                             
            scrollTo: "@"                                                                    
        },                                                                                   
        link: function(scope, $elm,attr) {                                                   

            $elm.on('click', function() {                                                    
                $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
            });                                                                              
        }                                                                                    
    }})     

d'Utilisation (par exemple, cliquez sur les div " de retour au top de passer à l'id de défilement en haut):

<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll"> 

il est également supporté par chrome,firefox,safari et IE cause du html,élément de corps .

afin d'animer à un élément spécifique à l'intérieur d'un conteneur de défilement (DIV fixe)

/*
    @param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to
    Scrolls to a specific element in the div container
*/
this.scrollTo = function(container, anchor) {
    var element = angular.element(anchor);
    angular.element(container).animate({scrollTop: element.offset().top}, "slow");
}

une solution angulaire utilisant $anchorScroll http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html :

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
  var i = 1;

  $scope.items = [{ id: 1, name: 'Item 1' }];

  $scope.addItem = function (){
    i++;
    //add the item.
    $scope.items.push({ id: i, name: 'Item ' + i});
    //now scroll to it.
    $location.hash('item' + i);
    $anchorScroll();
  };
});

et voici un morceau: http://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM?p=preview

et si vous vous souciez d'une solution javascript pure, en voici une:

Invoquer runScroll dans votre code avec conteneur parent de l'id et de la cible de défilement id:

function runScroll(parentDivId,targetID) {
    var longdiv;
    longdiv = document.querySelector("#" + parentDivId);
    var div3pos = document.getElementById(targetID).offsetTop;
    scrollTo(longdiv, div3pos, 600);
}


function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function () {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop == to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

la Référence: de la Croix-navigateur JavaScript (pas de jQuery...) faites défiler vers le haut animation

Merci Andy pour l'exemple, cela a été très utile. J'ai mis fin à la mise en œuvre d'une stratégie légèrement différente puisque je suis en train de développer un parchemin d'une seule page et que je ne voulais pas que Angular se rafraîchisse en utilisant L'URL HASHBANG. Je veux aussi préserver l'action arrière/avant du navigateur.

au lieu d'utiliser la directive et le hachage, j'utilise un $scope.$regarder sur l'emplacement$.cherche, et obtient la cible de là. Cela donne une belle étiquette d'ancrage propre

<a ng-href="#/?scroll=myElement">My element</a>

j'ai enchaîné le code de la montre à la déclaration de mon module dans app.js:

.run(function($location, $rootScope) {
   $rootScope.$watch(function() { return $location.search() }, function(search) { 
     var scrollPos = 0;
     if (search.hasOwnProperty('scroll')) {
       var $target = $('#' + search.scroll);
       scrollPos = $target.offset().top;
     }   
     $("body,html").animate({scrollTop: scrollPos}, "slow");
   });
})

la mise en garde avec le code ci-dessus est que si vous accédez par URL directement à partir d'une route différente, le DOM ne peut pas être chargé à temps pour la cible $de jQuery.offset (). La solution est d'insérer ce code dans un watcher $viewContentLoaded. Le code final ressemble à ceci:

.run(function($location, $rootScope) {
  $rootScope.$on('$viewContentLoaded', function() {
     $rootScope.$watch(function() { return $location.search() }, function(search) {
       var scrollPos = 0 
       if (search.hasOwnProperty('scroll')) {
         var $target = $('#' + search.scroll);
         var scrollPos = $target.offset().top;
       }
       $("body,html").animate({scrollTop: scrollPos}, "slow");                                                                                                                                                                    
     });  
   });    
 })

testé avec Chrome et FF

j'ai utilisé la réponse d'andrew joslin, qui fonctionne très bien mais a déclenché un changement de route angulaire, qui a créé un parchemin à la recherche de sursaut pour moi. Si vous voulez éviter de déclencher un changement d'itinéraire,

myApp.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}, "slow");
        return false;
      });
    }
  }
});

Qu'en est-il de " Angular-scroll , il est activement maintenu et il n'y a pas de dépendance à jQuery..

autre suggestion. Une directive avec sélecteur.

HTML:

<button type="button" scroll-to="#catalogSection">Scroll To</button>

angulaire:

app.directive('scrollTo', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {

                var target = $(attrs.scrollTo);
                if (target.length > 0) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    });
                }
            });
        }
    }
});

Aussi avis $anchorScroll

réponse très claire, en utilisant juste ANGULARJS, aucun JQUERY dépend

dans votre html quelque part en bas <back-top>some text</back-top>

dans votre html quelque part en haut <div id="top"></div>

dans votre js:

/**
 * @ngdoc directive
 * @name APP.directive:backTop
 <pre>
<back-top></back-top>
 </pre>
 */


angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<span class=\'btn btn-mute pull-right\'><i class=\'glyphicon glyphicon-chevron-up\'></i><ng-transclude></ng-transclude></span>',
    scope: {
    },
    link: function(scope, element) {
      element.on('click', function(event) {
        $anchorScroll(['top']);
      });
    }
  };
}]);