在一个数组中滚动到下一个元素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检测当前视口中的部分，并拥有一个单一的按钮（使用ng-click）来滚动到$scope.ids数组中的下一个部分。

此外，一旦到达底部，使angular检测到底部并将ng-click更改为返回顶部。

我不能有任何jQuery依赖项，并且我可能应该提到我正在学习AngularJS。

- TenderloinSky

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

- ayhan kebeli

---

如果所有东西都那么简单就好了。如果你读了我上面的问题，那就不是问题所在了。我知道如何使用锚点滚动进行导航，但问题是我需要一个单独的固定按钮来向下/返回顶部滚动。感谢您的贡献。 - TenderloinSky