Прокрутите до пункта «Тело ботстрапа» по щелчку связанной ссылки

Question

У меня есть длинный список панелей, которые утомительны для прокрутки. Я пытаюсь установить ярлык ссылок в верхней части страницы.

код Ярлык:

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" > 
    <img src="obama.jpg" class="img-responsive" /> 
</a> 

Отправляясь:

<div class="panel panel-default" id="obama"> 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
     // rest of panel1's code 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      // panel body 
     </div> 
    </div> 
</div> 

Это, кажется, работает в каком-то отношении. Когда я нажимаю на ярлык, он открывает панель. Теперь мне просто нужно прокрутить список.

Я пробовал:

$('#accordion').on('shown.bs.collapse', function (e) { 
    var id = $(e.target).prev().find("[id]")[0].id; 
    navigateToElement(id); 
}) 

function navigateToElement(id) { 
    $('html, body').animate({ 
     scrollTop: $("#" + id).offset().top 
    }, 1000); 
} 

Но безрезультатно. Есть идеи? Благодаря!

Answer 1

Попробуйте это:

HTML:

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" > 
    <img src="obama.jpg" class="img-responsive" /> 
</a> 
<div class="panel panel-default" id="obama"> 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
     // rest of panel1's code 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
     <div class="panel-body" id="panel-body1"> 
      // panel body 
     </div> 
    </div> 
</div> 

JS:

$('.collapse').on('shown.bs.collapse', function (e) { 
    var id = $(e.target).prop('id'); 
    // To scroll to panel-body (untested) 
    // var id = $(e.target).children('.panel-body').prop('id'); 
    navigateToElement(id); 
}); 

function navigateToElement(id) { 
    $('html, body').animate({ 
     scrollTop: $("#" + id).offset().top 
    }, 1000); 
} 

http://jsfiddle.net/jdlubrano/zm2qnjnf/ (сжать ваш экран, чтобы увидеть, если страница прокручивается правильно).