我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。
那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?
我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。
那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?
当前回答
以上所有答案都打破了预期的浏览器行为。大多数人想要的是,如果这是一个“新”页面,它会滚动到顶部,但如果你通过后退(或前进)按钮到达那里,它会返回到之前的位置。
如果你采用HTML5模式,这将变得很简单(尽管我相信一些聪明的人能够想出如何让它变得更优雅!):
// Called when browser back/forward used
window.onpopstate = function() {
$timeout.cancel(doc_scrolling);
};
// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
doc_scrolling = $timeout( scroll_top, 50 );
// Moves entire browser window to top
scroll_top = function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
它的工作方式是,路由器假设它要滚动到顶部,但会延迟一点,让浏览器有机会完成。如果浏览器随后通知我们更改是由于后退/前进导航,它将取消超时,并且滚动永远不会发生。
我使用原始文档命令来滚动,因为我想移动到窗口的整个顶部。如果你只是想让你的ui视图滚动,那么设置autoscroll="my_var",你可以使用上面的技术控制my_var。但我认为大多数人会想滚动整个页面,如果你去“新的”页面。
上面使用的是ui-router,不过你也可以使用ng-route,把$routeChangeSuccess换成$stateChangeSuccess。
其他回答
没有一个答案能解决我的问题。我在视图之间使用动画,滚动总是在动画之后发生。我发现的解决方案是,在动画之前滚动到顶部是以下指令:
yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
return {
restrict: 'A',
link: function ($scope, element) {
$animate.on('enter', element, function (element, phase) {
if (phase === 'start') {
window.scrollTo(0, 0);
}
})
}
};
}]);
我把它插入我的视图,如下所示:
<div scroll-to-top-before-animation>
<div ng-view class="view-animation"></div>
</div>
以上所有答案都打破了预期的浏览器行为。大多数人想要的是,如果这是一个“新”页面,它会滚动到顶部,但如果你通过后退(或前进)按钮到达那里,它会返回到之前的位置。
如果你采用HTML5模式,这将变得很简单(尽管我相信一些聪明的人能够想出如何让它变得更优雅!):
// Called when browser back/forward used
window.onpopstate = function() {
$timeout.cancel(doc_scrolling);
};
// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
doc_scrolling = $timeout( scroll_top, 50 );
// Moves entire browser window to top
scroll_top = function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
它的工作方式是,路由器假设它要滚动到顶部,但会延迟一点,让浏览器有机会完成。如果浏览器随后通知我们更改是由于后退/前进导航,它将取消超时,并且滚动永远不会发生。
我使用原始文档命令来滚动,因为我想移动到窗口的整个顶部。如果你只是想让你的ui视图滚动,那么设置autoscroll="my_var",你可以使用上面的技术控制my_var。但我认为大多数人会想滚动整个页面,如果你去“新的”页面。
上面使用的是ui-router,不过你也可以使用ng-route,把$routeChangeSuccess换成$stateChangeSuccess。
我终于得到了我需要的东西。
我需要滚动到顶部,但不想让一些过渡
您可以在逐路由级别上控制这一点。 我通过@wkonkel组合了上述解决方案,并在一些路由声明中添加了一个简单的noScroll: true参数。然后我在转换的时候抓住了它。
总而言之:在新的转场时,它会浮动到页面的顶部,在前进/后退转场时它不会浮动到顶部,并且它允许您在必要时覆盖此行为。
代码:(之前的解决方案加上一个额外的noScroll选项)
// hack to scroll to top when navigating to new URLS but not back/forward
let wrap = function(method) {
let orig = $window.window.history[method];
$window.window.history[method] = function() {
let retval = orig.apply(this, Array.prototype.slice.call(arguments));
if($state.current && $state.current.noScroll) {
return retval;
}
$anchorScroll();
return retval;
};
};
wrap('pushState');
wrap('replaceState');
把它放到你的app.run块中并注入$state…myApp.run(函数(状态){…})
然后,如果你不想滚动到页面顶部,创建一个这样的路由:
.state('someState', {
parent: 'someParent',
url: 'someUrl',
noScroll : true // Notice this parameter here!
})
你可以使用这个javascript
$anchorScroll()
供任何遇到标题中描述的问题的人参考(就像我一样),谁也在使用 AngularUI路由器插件…
在这个SO问题中,当你改变路由时,angular-ui路由器会跳到页面的底部。 不明白为什么页面在底部加载?Angular UI-Router自动滚动问题
然而,正如答案所述,你可以通过在ui视图中输入autoscroll="false"来关闭这种行为。
例如:
<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div>
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view