How to scroll a div to left using AngularJS

Question

I have a div like below:

<div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div>
<div class="customer-ust-bant col-xs-22" id="letters">
    <box ng-repeat="lt in alph" name="{{lt}}" id="{{lt}}"></box>
</div>
<div class="col-xs-1 scroll-button" ng-click="gotoBottom()"><i class="glyphicon glyphicon-chevron-right"></i> </div>

and box template:

<div class="alphabet-kutu">{{name|uppercase}}</div>

and the directive:

app.directive("box", function() {
return {
    restrict:"E",
    scope:{
        name:"@"
    },
    templateUrl:"/static/templates/customers/box.html",
    link:function(scope,elem,attrs,ctrl) {

    }
  };
})

As you see I have div containing letters in alphabet and styled in horizontal scroll.

When a button is clicked i want to scroll this div to left.

 $scope.gotoBottom = function (){
var element = angular.element( document.querySelector( '#letters' ) );
    element.animate({scrollLeft: element.offset().left}, "slow");
    //element.scrollLeft(100);

};

I tried animate and scrollLeft functions. But I did not do any good. Is there a special function in AngularJS for this situations? How do I scroll a div to left using jQuery?

Answer 1

I think you should give another value to your scrollLeft. Because in the given code, you are trying to scroll the element to its current location, so it won't move. For example:

element.animate({scrollLeft: element.offset().left - 50}, "slow");

PS: Please ensure you have jQuery included. The subset of jQuery embedded in angularJS does not seem to support animate function