无法弄清楚为啥页面在底部加载？ Angular UI-Router 自动滚动问题

Posted 2023-02-19

【中文标题】无法弄清楚为啥页面在底部加载？ Angular UI-Router 自动滚动问题

【英文标题】：Can't figure out why page loads at bottom? Angular UI-Router autoscroll Issue无法弄清楚为什么页面在底部加载？ Angular UI-Router 自动滚动问题

【发布时间】：2014-03-09 20:01:37

【问题描述】：

对于我的生活，我无法弄清楚为什么这个主页会加载到底部。这是 Angular ui-router、angular、javascript 还是 CSS 问题？我已经坚持了两个小时，不知道为什么我的 html 页面加载在底部而不是顶部，这真的扼杀了我作为程序员的自尊：/

这里是主页：[ URL Redacted ]

更新 -- 我解决了这个问题。它与 Angular UI-Router 一起使用。有关简单修复，请参阅下面的答案。

我使用 Angular 和 Angular UI-Router，设置看起来像这样......

default.jade

  doctype html
  html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
  include ../includes/head
  body(ng-controller="RootController")
  block content
  include ../includes/foot

index.jade

extends layouts/default

block content
  section.container
    div(ui-view="header")
    div(ui-view="content")
    div(ui-view="footer")

Angular Config.js

window.app.config(function($stateProvider, $urlRouterProvider) 
// For any unmatched url, redirect to "/"
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
    .state('home', 
      url: "/",
      views: 
        "header":     templateUrl: "views/header/home.html"   ,
        "content":    templateUrl: "views/content/home.html"  ,
        "footer":     templateUrl: "views/footer/footer.html" 
      ,
      resolve:  factory: setRoot 
    )
    .state('signin', 
      url: "/signin",
      views: 
        "header":     templateUrl: "views/header/signin.html"   ,
        "content":    templateUrl: "views/content/signin.html"  ,
        "footer":     templateUrl: "views/footer/footer.html" 
      ,
      resolve:  factory: setRoot 
    )

【参考方案1】：

Angular UI-Router 最近更新了它的应用程序，以便它自动向下滚动到默认加载的新视图。这导致我的应用程序页面向下滚动加载。要关闭此功能，只需将以下属性添加到您的 ui-view：

<div ui-view="header" autoscroll="true"></div>

【讨论】：

我遇到了 OP 描述的问题，这对我有用，我确实必须在我的几个 child.siblings[n] ui-view div 上添加此属性。

自发帖以来，ui-router 更改了自动滚动的默认操作。 autoscroll="false" 设置现在在加载新视图时保留滚动位置。但是autoscroll="true" 将加载新视图的顶部。

这个解决方案非常适合我。但是，当我使用浏览器后退按钮加载上一页时，由于 autoscroll='true' ，它也会滚动到顶部。解决方案是什么？

嗨，由于某种原因，这个自动滚动对我不起作用。我有一个加载嵌套 ui 视图的 ui 视图（3 个视图：页眉、内容和页脚）。当我进入重新加载内容视图并滚动到一半的状态时，然后重新加载我的浏览器，它会自动滚动回那个确切的位置。我已经尝试了所有使用 $uiViewScroll(element) 来制作 scrollTop 指令的方法。没有任何工作。现在有点让我发疯。我总是想从屏幕顶部开始，但我似乎无法绕过这个自动滚动功能。有人可以帮我解决吗？

难以置信。我只能对自己说：RTF。我没有在自动滚动中使用表达式。我使用autoscroll="false" 而不是autoscroll=" 'false' "。容易被忽视。也许在代码中可以捕捉到一些东西？如果是布尔值，则将其转换为表达式

【参考方案2】：

这是一个可能的解决方案，我使用了一种解决方法，因为自动滚动对我不起作用，所以我强迫我的视图滚动到顶部。希望这会有所帮助。

app.run(['$window', '$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager',  '$timeout', function($window, $rootScope, $location, $cookieStore, $state,CacheManager, $timeout)


$rootScope.$on('$viewContentLoaded', function()

var interval = setInterval(function()
  if (document.readyState == "complete") 
      window.scrollTo(0, 0);
      clearInterval(interval);
  
,200);

);



]);

【讨论】：

这对我有用。我也能够简单地删除到下面的工作正常并删除了 200 毫秒的延迟...$rootScope.$on('$viewContentLoaded', function() window.scrollTo(0, 0); );

一个更好的解决方案是使用 $anchorScroll() 而不是 window.scrollTo。我现在正在使用锚滚动并且它可以工作。 "$rootScope.$on("$viewContentLoaded", function() $anchorScroll(); );"

"$rootScope.$on("$viewContentLoaded", function() $anchorScroll(); );"对我不起作用。但是这个工作： $rootScope.$on('$viewContentLoaded', function() window.scrollTo(0, 0); );简单高效 :) 感谢您的解决方案。

【参考方案3】：

在运行块中添加：

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

当然你必须注入 $anchorScroll 依赖

【讨论】：

使用 ui-router 它应该是“stateChangeSuccess”，因为“routeChangeSuccess”我猜是 ng-router 的？

【参考方案4】：

在您的应用路由模块中，将以下内容添加到 RouterModule

RouterModule.forRoot(routes, scrollPositionRestoration: 'enabled')

【讨论】：

但是为什么会这样呢？有时没有此属性也可以工作

【参考方案5】：

我不久前遇到了这个问题。发生的事情是您在第 1 页，向下滚动我想象的页面，然后单击一个按钮转到第 2 页。然后，当您转到下一页时，路由器不会重新调整您的滚动位置。我通过在所有路线更改上滚动到顶部来解决此问题。

【讨论】：

添加示例代码以显示您所做的工作将提高此答案的质量

我编辑了，因为它没有为答案添加任何内容。如果您没有时间写一个完整的答案，也许您应该直接发表评论？

我阅读并理解它纯粹是一种噪音，就像“嗨”、“谢谢”和“希望有帮助”一样

这是 Mindstormy 的一种解决方案。感谢您尝试提供帮助:)

在您的答案中添加代码可能会有所帮助，因为您实际上并没有提供任何解决方案。