目前我正在使用 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。
最佳答案
<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();
};
关于javascript - 滚动到数组中的下一个元素 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35128667/