使用 ui-router 和 Angularjs 自动滚动到顶部

Posted

技术标签:

【中文标题】使用 ui-router 和 Angularjs 自动滚动到顶部【英文标题】:Autoscroll to TOP with ui-router and Angularjs 【发布时间】:2014-12-14 04:22:20 【问题描述】:

我已经阅读了很多不同的问题,但给出的解决方案似乎都不适合我的用例。我一开始只是简单地将 target="_top" 放在我的所有链接上,但这实际上会迫使我的应用程序重新加载,这将无法正常工作。我还看到有人说他们使用 autoscroll="true",但这似乎只有在我的 ui-view 中才有效。

问题在于,在我的 index.html 文件中,我修复了位于我的第一个 ui 视图之上的导航和其他静态元素。这意味着当我转到其他页面时,当页面加载通过这些元素时,我会失去导航。我也试过把它放在身上:

<body autoscroll="true">
</body>

这似乎也没有任何作用。所以问题是,如何确保新页面(来自 ui-router 的新路由更改)导致从页面顶部开始?谢谢!

【问题讨论】:

【参考方案1】:

Using version 1.0.6,$stateChangeSuccess 事件已弃用,取而代之的是 $transitions 服务。这是我用来在每次状态更改时滚动到顶部的代码:

app.run(['$transitions', function ($transitions) 
    $transitions.onSuccess(, function () 
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    )
]);

【讨论】:

这是最新的答案,接受的答案是指旧的 uirouter 版本。 5 个 SO 主题和 20 个答案稍后,这是唯一有效的。你应该起来【参考方案2】:

与@TaylorMac 的例外答案相同,但在 $locationChangeStart 中。

index.run.js:

$rootScope.$on('$locationChangeStart', function() 
   document.body.scrollTop = document.documentElement.scrollTop = 0;
);

【讨论】:

【参考方案3】:

为此有一个 Angular 服务。 https://docs.angularjs.org/api/ng/service/$anchorScroll

示例代码:

.run(function ($rootScope, $state, $stateParams, $anchorScroll) 

    $rootScope.$on('$stateChangeStart', function () 
        $anchorScroll();
    );

);

如果你想滚动到特定元素

.run(function ($rootScope, $state, $stateParams, $anchorScroll) 

    $rootScope.$on('$stateChangeStart', function () 
       // set the location.hash to the id of
       // the element you wish to scroll to.
        $location.hash('bottom');

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

);

【讨论】:

【参考方案4】:

我正在使用 ui-router。我的跑步看起来像这样:

.run(function($rootScope, $state, $stateParams)
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
  $rootScope.$on('$stateChangeSuccess', function() 
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  ); 
)  

【讨论】:

【参考方案5】:

我必须结合其他两个答案。

<div ui-view autoscroll="false"></div>

结合

$rootScope.$on('$stateChangeSuccess', function() 
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
);

注意:这是在 ui-router v0.2.15 上

【讨论】:

【参考方案6】:

如果您希望它始终滚动到 0 跨浏览器,请不要对自动滚动执行任何操作。只需将此作为您的运行块:

$rootScope.$on('$stateChangeSuccess', function() 
   document.body.scrollTop = document.documentElement.scrollTop = 0;
);

【讨论】:

参加晚会但很喜欢! 你让我开心! 效果很好。我建议的唯一改进是像这样使用$document 服务:$document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0; 从 iFrame 中: $rootScope.$on('$stateChangeSuccess', function() window.parent.$("body").animate(scrollTop:100, 'slow' ); ); 像魅力一样工作。不需要autoscroll = true。只是不要忘记像这样在你的run 块中注入$document.run(function($rootScope, $state, $document, $stateParams) $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $rootScope.$on('$stateChangeSuccess', function() $document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0; ); ) 【参考方案7】:

我遇到了完全相同的问题,修复了路线更改的导航栏,页面加载部分向下滚动页面。

我刚刚将autoscroll="false" 添加到ui-view,如下所示:

<div ui-view="main" autoscroll="false"></div>

编辑

刚刚测试了这个方法,有点脏,但它有效。将角度服务 $anchorScroll$location 导入 ui-router .state 配置的相关控制器。然后在 ui-router 上使用 $watch $stateParams 在路由/状态更改时调用 $location.hash('top');

https://docs.angularjs.org/api/ng/service/$anchorScroll

https://docs.angularjs.org/api/ng/service/$location#hash

.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) 

    $scope.$watchCollection('$stateParams', function() 
       $location.hash('top');
       $anchorScroll();
    );
);

【讨论】:

也试过了,但是当我链接到新路线时,它只会显示从上一页停止滚动的位置。没有运气:( 控制器在路由更改时收集垃圾,您链接的状态/页面是否在 ui-router .state 对象中有控制器? 他们中的一些人是的。奇怪的是,所有页面都会发生这种情况。 刚刚使用 $location.hash(); 用另一种方法更新了; 当你像这样一起使用它们时,你不需要同时导入它们。只需使用 $anchorScroll('top');

以上是关于使用 ui-router 和 Angularjs 自动滚动到顶部的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS ui-router (嵌套路由)的简单学习

如何使用 AngularJS 的 ui-router 提取查询参数?

AngularJS ui-router (嵌套路由)

在 AngularJs 中使用 UI-Router 更改导航菜单

AngularJS ui-router 登录认证

AngularJS的UI-Router学习