使用Bootstrap和AngularJS时页面向上滚动

时间：2015-02-11 09:47:37

标签： angularjs twitter-bootstrap

我正在使用Bootstrap和AngularJS编写一个HTML页面来捕获订单的详细信息，当页面加载完毕后，它会跳起来，以便面板的标题隐藏在bootstrap导航栏下。

这不是我所期待的。请参阅此plunkr以获取我想要实现的示例。它显示了面板标题，并且焦点位于Order Ref字段上，并且页面根本无法向上移动。

我试图创建一个使用AngularJS来演示问题的plunkr，但我无法让它正常运行所以我决定展示相同的插入代码，希望有人之前遇到过这个问题。 

<!-- Orders.html -->

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="site.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <title>Portal</title>
</head>
<body>
    <header class="bs">
        <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" rel="home" href="#">Portal</a>
                </div>
                <div class="collapse navbar-collapse">
                    <div class="nav navbar-nav navbar-right">
                        <div class="navbar-text">Search</div>
                        <form class="navbar-form navbar-left" role="search">
                            <div class="input-group">
                                <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
      <form name="form" class="form-horizontal" confirm-on-exit>
          <div class="panel panel-primary">
              <div class="panel-heading">
                  Create New Order
              </div>
              <div class="panel-body">
                  <div class="form-group">
                      <label for="inputOrderRef3" class="col-sm-2 control-label">Order Ref</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputOrderRef3" placeholder="Order Ref" ng-model="order.orderRef" maxlength="6" required autofocus>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputOrderDate3" class="col-sm-2 control-label">Order Date</label>
                      <div class="col-sm-10">
                          <input type="date" class="form-control" id="inputOrderDate3" ng-model="order.orderDate" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputCustomer3" class="col-sm-2 control-label">Customer</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputCustomer3" placeholder="Customer" ng-model="order.customerName" maxlength="50" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputOrderedBy3" class="col-sm-2 control-label">Ordered By</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputOrderedBy3" placeholder="Ordered By" ng-model="order.orderedBy" maxlength="3" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputInstallationDate3" class="col-sm-2 control-label">Installation Date</label>
                      <div class="col-sm-10">
                          <input type="date" class="form-control" id="inputInstallationDate3" ng-model="order.installationDate" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputAddress3" class="col-sm-2 control-label">Address</label>
                      <div class="col-sm-10">
                          <textarea id="inputAddress3" class="form-control" rows="4" ng-model="order.address" maxlength="250" required></textarea>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputTown3" class="col-sm-2 control-label">Town</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputTown3" placeholder="Town" ng-model="order.town" maxlength="30" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputPostcode3" class="col-sm-2 control-label">Postcode</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputPostcode3" placeholder="Postcode" ng-model="order.postcode" maxlength="15" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputOrderNumber3" class="col-sm-2 control-label">Order Number</label>
                      <div class="col-sm-10">
                          <input type="text" class="form-control" id="inputOrderNumber3" placeholder="Order Number" ng-model="order.orderNumber" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="inputValue3" class="col-sm-2 control-label">Value</label>
                      <div class="col-sm-10">
                          <input type="number" class="form-control" id="inputValue3" ng-model="order.value" required>
                      </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                          <button type="submit" class="btn btn-primary" ng-click="saveOrder()">Save Order</button>
                          <button type="button" class="btn btn-default" ng-click="cancelOrder()">Cancel</button>
                      </div>
                  </div>
              </div>
          </div>
      </form>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
        <div class="container">
            <p class="text-muted">&copy; 2015 Copyrights</p>
            <p class="text-muted small">Built using Twitter Bootstrap v3.3.2</p>
        </div>
    </nav>
</body>
</html>

/* site.css */
body {
  padding-top: 70px;
  padding-bottom: 50px;
}

.huge {
  font-size: 40px;
}

.panel-green {
  border-color: #5cb85c;
}

.panel-green .panel-heading {
  border-color: #5cb85c;
  color: white;
  background-color: #5cb85c;
}

.panel-green a {
  color: #5cb85c;
}

.panel-green a:hover {
  color: #3d8b3d;
}

.panel-red {
  border-color: #d9534f;
}

.panel-red .panel-heading {
  border-color: #d9534f;
  color: white;
  background-color: #d9534f;
}

.panel-red a {
  color: #d9534f;
}

.panel-red a:hover {
  color: #b52b27;
}

.panel-yellow {
  border-color: #f0ad4e;
}

.panel-yellow .panel-heading {
  border-color: #f0ad4e;
  color: white;
  background-color: #f0ad4e;
}

.panel-yellow a {
  color: #f0ad4e;
}

.panel-yellow a:hover {
  color: #df8a13;
}

当页面向上移动并且创建糟糕的用户体验时，它非常烦人。由于这个问题在不使用Angular时没有发生，我倾向于认为Angular可能是问题，虽然我看不出如何。

修改

我已更新了plunkr，因此它现在使用AngularJS并且页面无法向上移动。我想知道这是否是因为ASP.NET MVC呈现了index.html页面？

<!-- Index.html -->
@{
    Layout = null;
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Orbit Works</title>
    @Styles.Render( "~/Content/css/themes/bundle", "~/Content/css/app" )
</head>
<body ng-controller="indexController">
    <ptl-header></ptl-header>
    <div class="container">
        <div ui-view></div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
        <div class="container">
            <p class="text-muted">&copy; 2015 Michael John Clarke.</p>
            <p class="text-muted small">Built using Twitter Bootstrap v3.3.2 and AngularJS v1.3.9</p>
        </div>
    </nav>
    @Scripts.Render( "~/bundles/script/libraries" )
    @Scripts.Render( "~/bundles/script/app" )
</body>
</html>

1 个答案:

答案 0 :(得分：0)

将autoscroll="untrue"添加到ui-view指令会阻止页面滚动到子ui-view，如here所述。

<div ui-view autoscroll="untrue"></div>
相关问题
最新问题