Crollo Bootstrap - vai all'inizio dell'articolo aperto?

Question

Sto usando la funzione di compressione bootstrap, ma quando apro un elemento che ha molto contenuto, quindi apro l'elemento successivo, salta giù e non va in cima all'elemento aperto. Ho provato con plug scrollTo come mostrato di seguito, ma non funziona:

JS:

$(function(){ 
    $('a.accordion-toggle').click(function(){ 
     $.scrollTo(this, 500);            
    }) 
}); 

HTML:

<div class="accordion" id="accordion2"> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse1">Austria</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
     <ul id="collapse1" class="member_list accordion-body collapse row"> 
      <li class="accordion-inner pull-left span4"> 
       <a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101">Filmladen</a> 
       <span> Michael Stejskal</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101" title="Filmladen" ><img src="http://dev.europa-distribution.org/assets/logos_film_laden-570x190.png" alt="Filmladen" ></a> 
      </li> 
      <li class="accordion-inner pull-left span4"> 
       <a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194">Polyfilm</a> 
       <span> Hans Koenig</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194" title="Polyfilm" ><img src="http://dev.europa-distribution.org/assets/logos_polyfilm-570x190.png" alt="Polyfilm" ></a> 
      </li> 
      <li class="accordion-inner pull-left span4"> 
       <a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228">Stadtkino Filmverleih</a> 
       <span> Claus Philipp</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228" title="Stadtkino Filmverleih" ><img src="http://dev.europa-distribution.org/assets/logos_stadtkino_filmverleih-570x190.png" alt="Stadtkino Filmverleih" ></a> 
      </li> 
     </ul> 
    </div> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse2">Belgium</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
     <ul id="collapse2" class="member_list accordion-body collapse row"> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6">ABC</a><span> Nicolaine Den Breejen</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6" title="ABC" ><img src="http://dev.europa-distribution.org/assets/logos_genci_kino_abc-570x190.png" alt="Genci kino abc" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61">Cineart-Cinelibre</a><span> Eliane du Bois &amp; Stephan de Potter</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61" title="Cineart-Cinelibre" ><img src="http://dev.europa-distribution.org/assets/logos_cineart-570x190.png" alt="Cineart" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127">Imagine Film Distribution</a><span> Christian Thomas &amp; Tinne Bral</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127" title="Imagine Film Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_imagine-570x190.png" alt="Imagine" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214">Le Parc Distribution</a><span> Jean-Pierre Pécasse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214" title="Le Parc Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_le_parc-570x190.png" alt="le Parc distribution" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145">Lumière</a><span> Jan de Clerq &amp; Annemie Degryse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145" title="Lumière" ><img src="http://dev.europa-distribution.org/assets/logos_lumiere-570x190.png" alt="logos_lumiere" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383">O’Brother</a><span> Olivier Bronckart</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383" title="O’Brother" ><img src="http://dev.europa-distribution.org/assets/logos_obrother_distribution-570x190.png" alt="obrother distribution" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185">Paradiso Filmed Entertainment</a><span> Olivier Mortagne</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185" title="Paradiso Filmed Entertainment" ><img src="http://dev.europa-distribution.org/assets/logos_paradiso-570x190.png" alt="Paradiso Films" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529">U-Dream</a><span> Stephanie Van den Berge</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529" title="U-Dream" ><img src="http://dev.europa-distribution.org/assets/logos_udream-570x190.png" alt="uDream" ></a></li>         
     </ul> 
    </div> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">Bulgaria</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
     <ul id="collapse3" class="member_list accordion-body collapse row"> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337">Artfest</a><span> Stefan Kitanov &amp; Mira Staleva</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337" title="Artfest" ><img src="http://dev.europa-distribution.org/assets/logos_artfest-570x190.png" alt="Art Fest" ></a></li> 
      <li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302">Pro Films</a><span> Emil Simeonov</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302" title="Pro Films" ><img src="http://dev.europa-distribution.org/assets/logos_pro_films-570x190.png" alt="Pro Films" ></a></li>          
     </ul> 
    </div> 
    <div class="accordion-group heading-left-11"> 
     <h5 class="accordion-heading row"> 
      <a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Canada</a> 
      <div class="icon-rt span1"> 
       <span class="icn"></span> 
      </div> 
     </h5> 
    <ul id="collapse4" class="member_list accordion-body collapse row"> 
     <li class="accordion-inner pull-left span4">Metropole Films<span> Charles Tremblay</span><img src="http://dev.europa-distribution.org/assets/logos_metropole_film_distribution-570x190.png" alt="métropole Films Distribution" ></li> 
    </ul> 
</div> 

Tutte le idee?

Answer 1

Ho scrollto lavorando con il crollo di bootstrap ma il codice è per WordPress. Ho inserito i tuoi contenuti e funziona. Bootstrap Collapse ha un evento mostrato e quindi è necessario conoscere l'altezza del contenuto per scorrere verso l'alto.

$(".accordion-body").on("shown", function() { 
    var selected = $(this); 
    var collapseh = $(".collapse .in").height(); 
    $.scrollTo(selected, 500, { 
     offset: -(collapseh) 
    }); 
}); 

Potrebbe essere necessario modificarlo un po ', ma dovrebbe funzionare.

Answer 2

Si può provare questo:

ho usato il seguente, funziona come un fascino:

$("#accordion2").bind('shown', function() { 
     var active=$("#accordion_univlist .in").attr('id'); 
     scrollhere('#'+active); 
     $('.closebutton-right').hide(); 
}); 

$('.accordion-heading').click(function() { 
    // Do something if you want to do on click else ignore this handler. 
} 

function scrollhere(destination){ 
    var stop = $(destination).offset().top - 80; 
    var delay = 1000; 
    $('body,html').animate({scrollTop: stop}, delay); 
    return false; 
} 

Si dà anche un effetto di rimbalzo, e mi piace.

Answer 3

Il nome dell'evento è cambiato in Bootstrap 3, quindi @ bboymaanu non funzionerà come mostrato. Dovrebbe invece utilizzare l'evento 'shown.bs.collapse'.

$(".accordion-body").on("shown.bs.collapse", function() { 
    var selected = $(this); 
    var collapseh = $(".collapse.in").height(); 
    $.scrollTo(selected, 500, { 
     offset: -(collapseh) 
    }); 
}); 

I nuovi eventi sono documented here.

Answer 4

$(".accordion-body").on("shown", function() { 
var id = $(this).attr('id'); 
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000); 
}); 
}); 

Esempio semplice. Il ".top + -50" è Minus 50px dalla parte superiore dell'elemento che consente il riempimento nella parte superiore.

Answer 5

Ecco una soluzione costruita su altri suggerimenti che:

• funziona anche per accordians incorporati
• scorre in modo l'intestazione è anche mostrato
• solo se non è già sullo schermo
• anima la pure

Codice:

Answer 6

$('#accordion').on('shown.bs.collapse', function() { 

    var panel = $(this).find('.in'); 

    $('html, body').animate({ 
     scrollTop: panel.offset().top 
    }, 500); 

});