How to reduce the position of a div when linking menus with div based on div id with scroll in angularjs or javascript

I have some div and links,here I am linking my menu with some div based on id,When you click particular link,particular div will visible inside scroll.But here problem is that the div is hiding inside header bar.So I want to just bring it to down so that particuar div will be visible properly.Here is the updated code below&nbsp;<a href="https://plnkr.co/edit/pzZNvTVVle3BBaUAvs7x?p=preview" target="_blank">https://plnkr.co/edit/pzZNvTVVle3BBaUAvs7x?p=preview</a>

I have some div and links,here I am linking my menu with some div based on id,When you click particular link,particular div will visible inside scroll.But here problem is that the div is hiding inside header bar.So I want to just bring it to down so that particuar div will be visible properly.Here is the updated code below https://plnkr.co/edit/pzZNvTVVle3BBaUAvs7x?p=preview

HTML
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <style type="text/css">
    .scroll-div {
  margin-top: 10px;
  scroll-behavior: smooth;
}

.anchor {
  border: 2px dashed red;
  padding: 10px 10px 200px 10px;
}

.my-fixed-header &gt; a {
  display: inline-block;
  margin: 5px 15px;
}
.html{
scroll-behavior: smooth;
}

</style>
<body ng-app="app">

<div ng-controller="AccordionDemoCtrl">

<div class="my-fixed-header" style="position:fixed;border:1px solid;padding:20px;width:100%;background:yellow;">
<a href="index.html#/#anchor{{x}}" ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3]">
Go to Div {{x}}
</a>
</div>
<div class="scroll-div">
<div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | filter:item.value ">
<div class="parents" ng-click="open(group)">{{ group.title }}
</div>
{{ group.content }}
<ul class="childs" ng-show="group.isOpen">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
</div>
</body>

script.js
var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
$scope.oneAtATime = true;

$scope.gotoDiv = function(x) {

      $scope.groups.forEach(a=&gt;{
           console.log(x);


        a.isOpen = true;


      });



 };

$scope.groups = [
{
title: 'title 1',
id:'1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 2',
id:'2',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 3',
id:'3',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 4',
id:'4',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]

},
{
  title: 'title 5',
  id:'5',
  list: ['&lt;i&gt;item1a&lt;/i&gt; blah blah',
    'item2a',
    'item3a',
    'item4a',
    'item5a',
    'item6a',
    'item7a'
    ]
},
{
  title: 'title 6',
  id:'6',
  list: ['&lt;i&gt;item1a&lt;/i&gt; blah blah',
    'item2a',
    'item3a',
    'item4a',
    'item5a',
    'item6a',
    'item7a'
    ]
}

];
$scope.groups[0].isOpen = true;
});


Angular JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development




What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

What are the differences? Do they each have specific use contexts?