更改路线不会滚动到新页面的顶部
更改路线不会滚动到新页面的顶部
提问于 2014-01-11 06:53:07
当路线改变时，我发现了一些不受欢迎的行为，至少对我来说是这样。在教程http://angular.github.io/angular-phonecat/step-11/app/#/phones的步骤11中，您可以看到电话列表。如果你滚动到底部，点击最新的一个，你可以看到滚动不是在顶部，而是在中间。
我在我的一个应用程序中也发现了这个，我想知道如何才能让这个滚动到顶部。我可以手动做，但我认为应该有其他优雅的方法来做这件事，我不知道。
那么，当路线改变时，有没有一种优雅的方式滚动到顶部呢？
回答 14
Stack Overflow用户
发布于 2014-10-16 03:52:14
只需运行此代码即可
$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});Stack Overflow用户
发布于 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');
})Stack Overflow用户
发布于 2014-12-14 06:51:32
这是我的(看似)健壮、完整和(相当)简洁的解决方案。它使用兼容缩小的样式(以及对模块的angular.module(名称)访问)。
angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);另外，我发现无论设置为true还是false，自动滚动都没有影响。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21055952
复制相关文章
相似问题