Utilizzo dei dati Bootstrap-toggle = "collapse" e scrollIntoView() per mostrare e scorrere fino al contenuto

Question

In un sito che sto creando con Bootstrap 3, esiste una sezione che viene nascosta utilizzando la classe collapse. Ho aggiunto un pulsante per alternare la sezione in modo che possa essere visibile. Tutto funziona bene Ciò di cui ho bisogno è la possibilità di alternare il contenuto E di scorrere fino alla sezione quando viene mostrato.

Ecco il mio codice del pulsante:

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

Ecco il mio tenore:

<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> 

Infine, qui ho tentato di legare insieme le cose che utilizzano jQuery (anche se le mie competenze di jQuery sono molto limitati):

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

Qualcuno può individuare il problema con il mio codice sopra o suggerire una soluzione migliore?

Answer 1

Si dovrebbe legarsi l'evento appropriato nel plugin crollo Bootstrap: http://getbootstrap.com/javascript/#collapse-events

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

Answer 2

ottenere l'elemento formano l'evento

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