使用Bootstrap data-toggle ="collapse"和scrollIntoView()来显示和滚动到内容

Question

在我使用Bootstrap 3构建的站点上,有一个使用collapse该类隐藏的部分.我添加了一个按钮来切换部分,使其可见.一切正常.我需要的是能够切换内容并在显示时滚动到该部分.

这是我的按钮代码:

<button class="btn btn-lg btn-primary" href="#benefits" data-toggle="collapse">Learn More</button>

这是我的内容:

<section id="benefits" class="text-white collapse" data-toggle="collapse">
<div class="container">
<div class="row">
<div class="col-md-12">
Text goes here
</div>
</div>
</div>
</section>

最后,在这里我尝试使用jQuery将事物绑定在一起(尽管我的jQuery技能非常有限):

$(document).ready(function() {
    $("#benefits").bind('shown', function() {
        document.getElementById('benefits').scrollIntoView();
    });
});

有人能用我上面的代码发现问题,还是建议更好的解决方案？

Answer 1

您应该绑定到Bootstrap折叠插件中的相应事件:http://getbootstrap.com/javascript/#collapse-events

$('#benefits').on('shown.bs.collapse', function () {
  this.scrollIntoView();
});

Answer 2

从事件中获取元素

    $(document).on('shown.bs.collapse', function(event){
        //console.log( "in! print e: " +event.type);
        event.target.scrollIntoView();
    });

Answer 3

如果您想要比 this.scrollIntoView() 更好的动画，请使用。然后您可以调整动画速度。

$('#benefits').on('shown.bs.collapse', function () {
    $('html, body').animate({
       scrollTop: $("#benefits").offset().top
    }, 1000);
});