Html AngularJs-Scroll Top指令仅在隐藏div时滚动，而不是在打开div时滚动_Html_Angularjs_Scrolltop

Html AngularJs-Scroll Top指令仅在隐藏div时滚动，而不是在打开div时滚动

html angularjs

Html AngularJs-Scroll Top指令仅在隐藏div时滚动，而不是在打开div时滚动,html,angularjs,scrolltop,Html,Angularjs,Scrolltop,我做了一个指令，当点击“了解更多”时，它会滚动到一个隐藏的下拉列表。它似乎只有在打开div后单击“隐藏”时才会滚动到该div 当它第一次下降时，如何使其滚动索引HTML <!DOCTYPE html> <html lang="en" data-ng-app="app"> <head> <meta charset="UTF-8"> <meta name="description" content="stuff"> <meta na

我做了一个指令，当点击“了解更多”时，它会滚动到一个隐藏的下拉列表。它似乎只有在打开div后单击“隐藏”时才会滚动到该div

当它第一次下降时，如何使其滚动

索引HTML

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">

<title> Title</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">

<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">


<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>

<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>

<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

</head>

<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>

<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>

<!-- Main JS -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>

<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->


<script src="js/jq.js"></script>
</body>

</html>

<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
     <h1 class="text-left h-color thin">
Text Header
</h1>

    <p class="lead p-color">More Text</p>
    <!-- Here is my Toggle Button --> 
<a scroll-to-item scroll-to="#myContent" class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed1 = !isCollapsed1"> 
<small>
   <div ng-show="isCollapsed1">
      <span class="glyphicon glyphicon-plus" ></span> Learn More
   </div>
   <div ng-hide="isCollapsed1">
      <span class="glyphicon glyphicon-minus"></span> Hide
   </div>
</small>
</a>

</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>

<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed1" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
    <div class="lead caption text-center">
         <h3 class="h-color2">Item 1</h3>

    </div>
    <div class="thumbnail">
        <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
        </div>
    <div class="lead caption">
        <p class="p-color"><small>Text</small>
        </p>
    </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
    <div class="lead caption text-center">
         <h3 class="h-color2">Item 2</h3>

    </div>
    <div class="thumbnail">
        <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
    </div>
    <div class="lead caption">
        <p class="p-color"><small>Text</small>
        </p>
    </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
    <div class="lead caption text-center">
         <h3 class="h-color2">Item 3</h3>

    </div>
    <div class="thumbnail">
        <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
    </div>
    <div class="lead caption">
        <p class="p-color"> <small>Some Text</small>

        </p>
    </div>
   </div>
</div>
<!-- END DROPDOWN-->

应用程序JS

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');

$routeProvider

.when('/', {
  templateUrl : 'pages/LandingPage.html',
  controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});

不使用内置指令的参数有哪些？因为您无法设置$anchorScroll的动画。单击按钮时，我希望平滑过渡$主播克罗尔只是跳到ID。那为什么要重新发明方向盘呢？这篇文章中JSFIDLE中提供的示例的行为是否与您想要实现的有所不同？我不是在试图重新发明轮子。我已经尝试了这些下载，但我仍然有他们的问题。当我单击“了解更多”时，它不会将窗口滚动到我要锁定的ID。相反，它向上而不是向下移动。当我关闭ID时，它似乎专注于它。它为什么这样做？你能详细说明一下吗？提交的代码包含不相关的额外html，但同时错过了用于构建工作集的控制器代码

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');

$routeProvider

.when('/', {
  templateUrl : 'pages/LandingPage.html',
  controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});