24

我使用 AngularJS 有一个奇怪的、仅限 safari 的滚动行为。

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

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

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

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

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

4

9 回答 9

51

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

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

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

于 2014-02-12T16:53:01.050 回答
19

你可以使用这个:

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

于 2014-04-01T10:54:14.893 回答
14

你试过使用 $anchorScroll() 吗?它记录在这里

于 2013-10-10T05:42:42.227 回答
3

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

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

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

于 2014-01-07T09:12:49.503 回答
3

你可以使用 $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();
};
于 2014-02-17T06:51:34.340 回答
2

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

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

于 2015-09-14T18:21:42.097 回答
0

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

但是我在应用程序级别编写了这段代码并且它有效。

 $rootScope.$on('$viewContentLoaded', function(){
                $window.scrollTo(0, 0);
            });
于 2015-05-07T06:48:22.330 回答
0

在控制器中,您实际上可以删除$fromwindow并简单地放置window.scrollTo(0,0);,而无需注入$window控制器。它对我很有用。

于 2016-09-29T18:18:46.673 回答
0

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

$rootScope.$on("$locationChangeSuccess",
function(event, current, previous, rejection) {
  $window.scrollTo(0,0);
});
于 2016-04-21T19:30:32.880 回答