How can I scroll window to element in AngularJS using anchorscroll()?

Question

I'm trying to implement a scrollTo effect in AngularJS on an ng-click event, following the example in this Plunkr.

I'm trying to scroll to categoryhead, like so:

myApp.controller('FoodCtrl', function ($scope, $http, $location, $anchorScroll) {

//other stuff 

$scope.loadFood = function(category) {
 //other stuff

  //Scroll category head to top of page
  $scope.categoryhead = "#" + category;
  $location.hash($scope.categoryhead);
  $anchorScroll();

 //Ajax load stuff
 };  
});

I have the value of $scope.categoryhead printing out in the template and can see that it is the correct ID for each element, but the window doesn't get scrolled. Am I doing something wrong in trying to pass the element ID to $anchorscroll()?

Here's my Plunkr

Ila · Accepted Answer · 2013-11-01 14:42:11Z

1

Figured it out after a while. I was specifying $scope.categoryhead incorrectly.

Here's a Plunkr with anchorscroll(); to various page elements.

answered Nov 1, 2013 at 14:42

Ila

3,5588 gold badges51 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinod Louis · Accepted Answer · 2013-11-01 11:20:52Z

-1

you missed out the css to apply so as no height is given its not showing scroll

.scroll{
  height: 350px;
  overflow: auto;
}

here is the updated plunker

answered Nov 1, 2013 at 11:20

Vinod Louis

4,9061 gold badge31 silver badges50 bronze badges

1 Comment

Ila Over a year ago

No, the original doesn't depend on a height & overflow setting on .scroll. It still works if you remove them.

Collectives™ on Stack Overflow

How can I scroll window to element in AngularJS using anchorscroll()?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related