当路线改变时,我发现了一些不受欢迎的行为,至少对我来说是这样。在教程http://angular.github.io/angular-phonecat/step-11/app/#/phones的步骤11中,您可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何才能让这个滚动到顶部。我可以手动做,但我认为应该有其他优雅的方法来做这件事,我不知道。
那么,当路线改变时,有没有一种优雅的方式滚动到顶部呢?
发布于 2014-10-16 03:52:14
只需运行此代码即可
$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});
发布于 2015-03-20 03:48:47
在尝试了ui-view autoscroll=true
、$stateChangeStart
、$locationChangeStart
、$uiViewScrollProvider.useAnchorScroll()
、$provide('$uiViewScroll', ...)
和许多其他工具的组合一两个小时后,我无法在新页面上滚动到最上面的页面以达到预期的效果。
这就是最终对我起作用的方法。它捕获pushState和replaceState,并仅在新页面导航到时更新滚动位置(后退/前进按钮保留其滚动位置):
.run(function($anchorScroll, $window) {
// hack to scroll to top when navigating to new URLS but not back/forward
var wrap = function(method) {
var orig = $window.window.history[method];
$window.window.history[method] = function() {
var retval = orig.apply(this, Array.prototype.slice.call(arguments));
$anchorScroll();
return retval;
};
};
wrap('pushState');
wrap('replaceState');
})
发布于 2014-12-14 06:51:32
这是我的(看似)健壮、完整和(相当)简洁的解决方案。它使用兼容缩小的样式(以及对模块的angular.module(名称)访问)。
angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);
另外,我发现无论设置为true还是false,自动滚动都没有影响。
https://stackoverflow.com/questions/21055952
复制相似问题