Question

我使用AngularJS进行奇怪的，仅限Safari的滚动行为。

每当用户在页面之间翻转时，页面都会被更改，就好像它们是AJAX一样。我知道他们在AngualrJS中，但最终的行为是当用户切换页面时浏览器不会滚动到顶部。

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

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

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

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

Answer 1

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

我刚刚发现了一个支持动画的好插件（纯angularJS）：

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

Answer 2

你可以用这个：

.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）;在你的控制器

Answer 3

您是否尝试过使用$ anchorScroll（）？它记录在案here。

Answer 4

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

$ anchorScroll上的AngularJS文档不是很好，所以我想发布这个链接，这对我有所帮助：

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

Answer 5

您可以使用$ anchorScroll

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

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

Answer 6

与@nonstopbutton一样，将autoscroll="true"添加到我的ngView元素也适用于我。我在这里提到这一点，因为这是对答案的评论，并且看到他的答复并不容易。

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

Answer 7

我与Chrome有类似的问题。但是，我不知道是否有任何特定的外部库导致此问题或其他原因。

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

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

Answer 8

在 locationChangeSuccess 事件后调用 $ window.scrollTo（0,0）; ：

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

Answer 9

在控制器中，您实际上可以从window删除window.scrollTo(0,0);，只需将$window放入控制器即可textPosition。它对我很有用。

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

9 个答案: