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

使用引导和AngularJS时向上滚动页面

angularjs twitter-bootstrap

使用引导和AngularJS时向上滚动页面,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我正在使用Bootstrap和AngularJS编写一个HTML页面来捕获订单的详细信息，当页面加载完毕后，它会跳起来，这样面板的标题就隐藏在Bootstrap导航栏下这不是我所期望的。看看这个例子，我想实现什么。它显示面板标题，焦点如预期的那样位于Order Ref字段，页面根本不会向上移动我曾尝试创建一个使用AngularJS来演示问题的plunkr，但我无法让它正常运行，所以我决定展示相同的plunked代码，希望有人以前遇到过

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

这不是我所期望的。看看这个例子，我想实现什么。它显示面板标题，焦点如预期的那样位于

Order Ref

字段，页面根本不会向上移动

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

<!-- 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;
}

将

autoscroll=“untrue”

添加到ui-view指令会阻止页面按所述滚动到子ui视图

你能确认你在

正文上有padding top
吗

是

正文{padding top:70px

；

padding bottom:50px

；}是我在site.css文件中的内容。我在上面的代码中没有看到site.css？？名字正确吗？我已经修改了帖子，加入了site.css文件。

<!-- 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>

<div ui-view autoscroll="untrue"></div>