javascript - 单击相关链接滚动到 Bootstrap 面板主体

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/ (缩小屏幕以查看页面是否正确滚动)。