javascript - 滚动到数组中的下一个元素 ID

Question

目前我正在使用 angular-scroll 进行导航，如下所示，它与导航栏中的链接完美搭配:

var ScrollApp = angular.module('myApp.ScrollApp', ['duScroll', 'ngAnimate']).value('duScrollOffset', 60);

ScrollApp.controller('ScrollCtrl', function($scope){
        var container = angular.element(document.getElementById('container'));
        var sectionhome = angular.element(document.getElementById('Home'));
        $scope.toTheTop = function() {
            container.scrollTop(60, 5000);
        };
        $scope.toHome = function() {
            container.scrollTo(sectionhome, 60, 1000);
        };
        $scope.scrollVariable = false;
        $scope.ids = ['Section1', 'Section2', 'Section3'];
    }
);

现在，我的问题是:

我怎样才能让 Angular 检测视口(viewport)中的当前部分，然后有一个带有 ng-click 的按钮？滚动到 $scope.ids 数组中的下一部分.

此外，一旦到达底部， Angular 检​​测底部，并更改 ng-click回到顶部。

我不能有任何 jQuery 依赖，我应该提到我只是在学习 AngularJS。

Answer 1

  <a ng-click="gotoSection("Section1")">Go to Section</a>
  <a id="Section1"></a>

 $scope.gotoSection= function(id) {
          // set the location.hash to the id of
          // the element you wish to scroll to.
          $location.hash(id);

          // call $anchorScroll()
          $anchorScroll();
        };