I am working with a div structure that looks like the following:
<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>
Also, here is the template for the box:
<div class="alphabet-kutu">{{name|uppercase}}</div>
And the corresponding directive:
app.directive("box", function() {
return {
restrict:"E",
scope:{
name:"@"
},
templateUrl:"/static/templates/customers/box.html",
link:function(scope,elem,attrs,ctrl) {
}
};
})
My goal is to display letters of the alphabet inside a horizontal scrolling div.
However, I'm facing an issue when trying to scroll this div to the left upon button click.
$scope.gotoBottom = function (){
var element = angular.element( document.querySelector( '#letters' ) );
element.animate({scrollLeft: element.offset().left}, "slow");
//element.scrollLeft(100);
};
I have attempted using animate and scrollLeft functions but with no success. Is there any AngularJS-specific method that can help me achieve this? How can I effectively scroll a div to the left using jQuery?