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

【问题标题】：AngularJS + Safari: Force page to scroll to top when pages switchAngularJS + Safari：页面切换时强制页面滚动到顶部
【发布时间】：2013-08-15 15:30:35
【问题描述】：

我在使用 AngularJS 时遇到了一种奇怪的、仅限 safari 的滚动行为。

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

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

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

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

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

【问题讨论】：

能否请您发布更多代码，例如控制器数据，可能是您的 routeProvider 的配置设置...等

标签： angularjs safari

【解决方案1】：

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

我刚刚发现了一个不错的插件（纯 angularJS），它也支持动画：

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

【讨论】：

我知道这对于中级/高级 AngularJS 开发人员来说可能很明显，但请记住 AngularJS 初学者（比如我自己）：不要忘记在控制器上添加 $window 引用，否则不会工作。
仅供参考，虽然在 README 文件中很清楚，但提到的存储库已移至 https://github.com/oblador/angular-scroll

【解决方案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);在你的控制器中

【讨论】：

我觉得这是最简单的方法，只要把$routeChangeStart改成$routeChangeSuccess，这样滚动效果就看不见了。
喜欢这个解决方案。谢谢 :) 将其添加到您的 XXX.config

【解决方案3】：

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

【讨论】：

anchorScroll 用于滚动到指定的元素，如果您只想滚动到页面顶部，我认为应该使用 $window.scrollTo(0, 0)。
我在寻找解决方案时找到了这个答案：stackoverflow.com/a/24549173/1578861 将 autoscroll="true" 添加到我的 ngView 元素对我有用：
这个问题的另一个答案可能更适合许多人：stackoverflow.com/a/21734337/199712

【解决方案4】：

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

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

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

【讨论】：

【解决方案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();
};

【讨论】：

【解决方案6】：

就像@nonstopbutton 所说，将autoscroll="true" 添加到我的ngView 元素也对我有用。我在这里提到这一点是因为这是对答案的评论，不容易看到他的回复。

更多信息在这里：https://stackoverflow.com/a/24549173/1578861

【讨论】：

【解决方案7】：

Chrome 也有类似的问题。但是，我不知道是否有任何特定的外部库导致了这个问题。

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

【讨论】：