在angular中自定义自动滚动顶部指令

custom autoscroll top directive in angular

本文关键字：滚动 顶部 指令 angular 自定义      更新时间：2023-09-26

当更改路由时，新加载的页面不会滚动到顶部。我在ui-view元素中添加了autoscroll = true指令，但它没有一直滚动到顶部，可能有一个向下偏移50px，我认为它必须做w/顶部固定导航栏。

我添加了一个自定义滚动指令，它完成了这项工作，新页面被滚动到顶部。这个指令的唯一障碍是不允许向下滚动。我不熟悉指令，我知道肯定有更多的代码丢失在自定义指令。有人能帮我一下吗?

指令如下:

angular.module('myapp')
.directive("scrollTop", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
    scope.visible = false;
    $window.scrollTo(0, 0);
    scope.$apply();
});
};
});

下面是html代码:

<body id="myapp" ng-app="myapp">
  <div ng-include="'navbar/_navbar.html'" ng-controller="NavbarMenuCtrl"></div>
  <div class="container-fluid">
    <div ui-view scroll-top><%= yield %></div ui-view>
  </div>
  <div ng-include="'footer/_footer.html'"></div>
</body>

我希望我可以使用autoscroll指令，但是有一个微小的偏移，它几乎滚动到顶部。也许我可以绕过那个指令，而不是构建一个自定义指令。谢谢你的帮助，我还是一个AngularJS新手。

autoscroll用于在视图更新时滚动到ui-view元素的顶部。如果你想在状态改变时滚动整个窗口。你可以添加一个运行块来观察状态变化并滚动它。

angular.module('myapp').run(['$rootScope','$window',function($rootScope,$window){
    $rootScope.$on("$stateChangeSuccess",function(){
         $window.scrollTo(0, 0);
    })
}]);
相关文章：