Question

我正在尝试在ng-click事件following the example in this Plunkr上的AngularJS中实现scrollTo效果。

我正在尝试滚动到categoryhead，就像这样：

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
 };  
});

我在模板中打印出$ scope.categoryhead的值，并且可以看到它是每个元素的正确ID，但窗口不会滚动。我是否在尝试将元素ID传递给$ anchorscroll（）时做错了什么？

Here's my Plunkr

Answer 1

一段时间后想出来。我错误地指定了$scope.categoryhead。

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

Answer 2

你错过了要申请的css，因为没有给出高度不显示滚动

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

这是更新后的plunker

如何使用anchorscroll（）将窗口滚动到AngularJS中的元素？

2 个答案: