AngularJS + Safari：页面切换时强制页面滚动到顶部

AngularJS + Safari: Force page to scroll to top when pages switch

我在使用AngularJS时出现了一种奇怪的，仅包含Safari的滚动行为。

每当用户在页面之间切换时，页面就会像AJAX一样被更改。我了解它们在AngualrJS中，但是导致的行为是，当用户切换页面时，浏览器不会滚动到顶部。

我试图强迫浏览器在使用新控制器时滚动到顶部，但是似乎没有任何作用。

我在每个控制器的顶部运行以下JS：

document.body.scrollTop = document.documentElement.scrollTop = 0;

这也是一个仅限Safari的错误，页面更改时，其他所有浏览器都会滚动到顶部。有没有人遇到过类似的问题或想过更好的解决方法？

相关讨论

$window.scrollTo(0,0)将滚动到页面顶部。

我刚刚找到了一个不错的插件(纯angularJS)，它也支持动画：

https://github.com/durated/angular-scroll

相关讨论

您可以使用此：

1
2
3
4
5

.run(["$rootScope","$window", '$location', function($rootScope, $window, $location) {

$rootScope.$on('$routeChangeStart', function(evt, absNewUrl, absOldUrl){
$window.scrollTo(0,0); //scroll to top of page after each route change
}}])

或对于选项卡开关，您可以使用$ window.scrollTo(0,0);在您的控制器中

相关讨论

您是否尝试过使用$ anchorScroll()？它记录在这里。

相关讨论

您可以使用$ anchorScroll

1
2
3
4
5
6
7
8

$scope.gotoTop = function (){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('top');

// call $anchorScroll()
$anchorScroll();
};

在Cordova应用程序中使用AngularJS时遇到相同的问题。在普通的浏览器或Android上，我没有问题，但在ios上，我得到的行为与Neil所述相同。

$ anchorScroll上的AngularJS文档不是很好，所以我想发布此链接可以帮助我做更多的事情：

http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html

就像@nonstopbutton所说的那样，将autoscroll="true"添加到我的ngView元素中也对我有用。我之所以在此提及，是因为这是对答案的评论，而且很难看到他的答复。

此处提供更多信息：https://stackoverflow.com/a/24549173/1578861

在控制器中，您实际上可以将$从window放下，并简单地放置window.scrollTo(0,0);，而不必将$window注入到控制器中。这对我来说很棒。

调用$ window.scrollTo(0,0);在locationChangeSuccess事件之后：

1
2
3
4

$rootScope.$on("$locationChangeSuccess",
function(event, current, previous, rejection) {
$window.scrollTo(0,0);
});

我在Chrome中遇到了类似的问题。但是，我不知道是否有任何特定的外部库导致此问题。

但是，我在应用程序级别编写了这段代码，并且可以正常工作。

1
2
3

$rootScope.$on('$viewContentLoaded', function(){
$window.scrollTo(0, 0);
});