【问题标题】:angularJS doesn't scroll to top after changing a view [duplicate]更改视图后angularJS不会滚动到顶部[重复]
【发布时间】:2014-07-21 18:26:32
【问题描述】:

例如:

用户在视图 A 上向下滚动;

然后用户点击一个链接,该链接带用户查看B;

视图是变化的, 但用户的垂直位置保持不变,必须手动滚动到屏幕顶部。

这是一个角度错误吗?

我写了一个小变通方法,使用 jquery 滚动到顶部;但我没有找到正确的事件来绑定它。

编辑看到评论后:

我如何以及何时将自己拉到顶峰?我正在使用 jquery,但 $viewContentLoaded 事件太快了(该方法运行,但当时页面不滚动)

【问题讨论】:

  • 可能你有固定的高度什么的。更改视图角度会从 ng-view 中删除内容并将其替换为新内容。一会儿 ng-view 的高度 == 0。因此,如果您停留在页面底部,则意味着该页面没有理由将您拉回顶部(高度没有变化)。
  • 您可以将滚动代码包装到 $timeout 中,超时时间非常短,例如 100 毫秒。

标签: angularjs


【解决方案1】:

解决方案是将autoscroll="true" 添加到您的 ngView 元素中:

<div class="ng-view" autoscroll="true"></div>

https://docs.angularjs.org/api/ngRoute/directive/ngView

【讨论】:

    【解决方案2】:

    Angular 在加载新视图时不会自动滚动到顶部,它只是保持当前滚动位置。

    这是我使用的解决方法:

    myApp.run(function($rootScope, $window) {
    
      $rootScope.$on('$routeChangeSuccess', function () {
    
        var interval = setInterval(function(){
          if (document.readyState == 'complete') {
            $window.scrollTo(0, 0);
            clearInterval(interval);
          }
        }, 200);
    
      });
    });
    

    将其放入您的引导程序(通常称为 app.js)。

    这是一个纯 javascript 解决方案(如果简单,最好不要使用 jQuery)。

    说明:脚本每 200 毫秒检查一次新 DOM 是否已完全加载,然后滚动到顶部并停止检查。我尝试不使用这个 200 毫秒的循环,但它有时无法滚动,因为页面没有完全显示。

    【讨论】:

    • 太棒了,谢谢:)
    • 我想在您的回答中添加更多内容:首先,$routeChangeSuccess 仅在您使用默认路由器时才会触发,如果您也可以收听 $viewContentLoaded$stateChangeSuccess你有某种自定义导航,另外,如果你正在缩小你的代码 .run(function($rootScope, $window) { 应该这样调用:.run([ "$rootScope", "$window",function($rootScope, $window) { 这两个问题我花了很长时间才意识到所以我希望这对其他人有帮助(你可能想更新你的回答这些信息@guilhem)
    【解决方案3】:

    根据@jarrodek 的评论,您似乎明白为什么会出现问题。

    至于解决方案,您可以按照@TongShen 的解决方案将您的函数包装在$timeout 中,也可以将函数调用放在您正在加载的部分中。

    <!-- New partial-->
    <div ng-init="scrollToTop()">
    
    </div>
    

    如果您查看更改是在单击事件后触发的,您还可以将函数调用放在该元素上。只是归结为时机。只是取决于事情是如何设置的。

    【讨论】:

      猜你喜欢
      • 2017-06-18
      • 1970-01-01
      • 1970-01-01
      • 2017-02-17
      • 2015-08-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-02-24
      相关资源
      最近更新 更多