У меня есть некоторые элементы div и ссылки, здесь я связываю свое меню с некоторыми элементами div на основе идентификатора. Когда вы нажимаете конкретную ссылку, конкретный элемент div будет виден внутри scroll. Но здесь проблема заключается в том, что div скрывается внутри панели заголовка.Я хочу просто опустить его, чтобы div-вид был правильно виден. Вот обновленный код ниже 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 > 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=>{
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: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 6',
id:'6',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
}
];
$scope.groups[0].isOpen = true;
});