在使用Angularjs中的ui-router时，我们通常会有一个或多个命名视图（ui-view）在页面中进行路由切换。默认情况下，当我们导航到另一个视图时，ui-router会将焦点滚动到该视图。但是，在某些情况下，我们可能想要滚动回文档的顶部，而不是到新的视图。
解决方法
为了实现这个目标，我们需要使用ui-router提供的ui-scroll指令。该指令允许我们配置路由状态，以便在进入状态时自定义滚动位置。
配置
首先，我们需要在路由状态配置中添加ui-scroll属性，并将其设置为true。这将启用自定义滚动位置。
$stateProvider.state('myState', {
url: '/my-url',
templateUrl: 'my-template.html',
controller: 'MyController',
resolve: {...},
uiScroll: true // 添加 ui-scroll 属性
});控制器
接下来，在控制器中，我们需要注入$uiViewScroll服务并调用scrollTo函数。这样，我们可以将文档滚动到顶部，而不是到达视图。
以下是示例代码：
angular.module('myApp').controller('MyController', ['$scope', '$uiViewScroll', function($scope, $uiViewScroll) {
$uiViewScroll(function() {
window.scrollTo(0, 0); // 滚动到文档顶部
});
}]);示例
以下是一个完整的示例，可以将文档从当前视图滚动回顶部：
-- -------------------- ---- -------
-------------------------------------------------- ---------- ---------------- ---------------- -------------- -
------------------------ -
------------------ --- -- -------
---
----
------------------------------- -
---- ----------
------------ -------------------
----------- ---------------
-------- ------
--------- ---- -- -- --------- --
---结论
使用Angularjs和ui-router进行前端开发时，我们通常需要在不同的视图之间进行路由切换。通过使用ui-scroll指令以及控制器中的$uiViewScroll服务，我们可以轻松地配置状态，以便在进入状态时自定义滚动位置。这使得我们能够将文档滚动回顶部，而不是到达新的视图。
希望这篇文章能够帮助你更好地理解如何在Angularjs中实现这个功能，并且能够为你的工作提供一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25253