我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。
那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?
我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。
那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?
当前回答
将自动滚动设置为true对我来说并没有什么用处,所以我选择了另一种解决方案。我构建了一个服务,每当路由发生变化时,它就会挂钩,并使用内置的$anchorScroll服务滚动到顶部。对我有用:-)。
服务:
(function() {
"use strict";
angular
.module("mymodule")
.factory("pageSwitch", pageSwitch);
pageSwitch.$inject = ["$rootScope", "$anchorScroll"];
function pageSwitch($rootScope, $anchorScroll) {
var registerListener = _.once(function() {
$rootScope.$on("$locationChangeSuccess", scrollToTop);
});
return {
registerListener: registerListener
};
function scrollToTop() {
$anchorScroll();
}
}
}());
注册:
angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
pageSwitch.registerListener();
}]);
其他回答
试试这个http://ionicframework.com/docs/api/service/$ionicScrollDelegate/
它会滚动到列表的顶部
我找到了这个解。如果你转到一个新视图,函数就会被执行。
var app = angular.module('hoofdModule', ['ngRoute']);
app.controller('indexController', function ($scope, $window) {
$scope.$on('$viewContentLoaded', function () {
$window.scrollTo(0, 0);
});
});
以下是我的(看似)健壮、完整且(相当)简洁的解决方案。它使用了最小化兼容样式(以及对模块的angular.module(NAME)访问)。
angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);
PS我发现自动滚动的东西没有影响,无论是设置为真或假。
你可以使用这个javascript
$anchorScroll()
只需要运行这段代码
$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});