Срыв ботстрапа - перейдите в начало открытого элемента?

Я использую функцию свертывания бутстрапа, но когда я открываю элемент, у которого много контента, затем открываем следующий элемент, он перескакивает и не переходит в начало открытого элемента. Я пробовал использовать плагин scrollto, как показано ниже, но он не работает:

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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=101'; return false;">Filmladen</a>
                <span> Michael Stejskal</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=101'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=194'; return false;">Polyfilm</a>
                 <span> Hans Koenig</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=194'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=228'; return false;">Stadtkino Filmverleih</a>
                 <span> Claus Philipp</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=228'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=6'; return false;">ABC</a><span> Nicolaine Den Breejen</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=6'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=61'; return false;">Cineart-Cinelibre</a><span> Eliane du Bois &amp; Stephan de Potter</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=61'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=127'; return false;">Imagine Film Distribution</a><span> Christian Thomas &amp; Tinne Bral</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=127'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=214'; return false;">Le Parc Distribution</a><span> Jean-Pierre Pécasse</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=214'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=145'; return false;">Lumière</a><span> Jan de Clerq &amp; Annemie Degryse</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=145'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=383'; return false;">O’Brother</a><span> Olivier Bronckart</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=383'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=185'; return false;">Paradiso Filmed Entertainment</a><span> Olivier Mortagne</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=185'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=529'; return false;">U-Dream</a><span> Stephanie Van den Berge</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=529'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=337'; return false;">Artfest</a><span> Stefan Kitanov &amp; Mira Staleva</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=337'; return false;" 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="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=302'; return false;">Pro Films</a><span> Emil Simeonov</span><a href="#" onclick="location.href='http://www.cidinet.eu/display_distributor.php?id_target_distributor=302'; return false;" 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>

Любые идеи?

Ответы

Ответ 1

У меня есть scrollto, работающий с обвалом bootstrap, но код для WordPress. Я привел в ваш контент, и он работает. Bootstrap Collapse имеет показанное событие, а затем вам нужно знать высоту содержимого для прокрутки вверх.

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

Возможно, вам придется немного подкорректировать его, но он должен работать.

Ответ 2

Название события изменилось в Bootstrap 3, поэтому @bboymaanu не будет работать, как показано. Вместо этого он должен использовать событие show.bs.collapse.

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

Новые события описаны здесь.

Ответ 3

Вот решение, основанное на других предложениях, которые:

  • также работает для встроенных аккордов
  • прокручивает, так что заголовок также отображается
  • только если он еще не на экране
  • анимирует также

код:

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

  // Validate this panel belongs to this accordian, and not an embedded one
  var actualAccordianId = $('a[href="#' + $(e.target).attr('id') + '"').data('parent');
  var targetAccordianId = '#' + $(this).attr('id');
  if (actualAccordianId !== targetAccordianId) return;

  var clickedHeader = $(this).find('.panel > .collapse.in').closest('.panel').find('.panel-heading');
  var offset = clickedHeader.offset();
  var top = $(window).scrollTop();
  if(offset) {
    var topOfHeader = offset.top;
    if(topOfHeader < top) {
      $('html,body').animate({ scrollTop: topOfHeader}, 100, 'swing');
    }
  }
});

Ответ 4

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

Простой пример. ".top + -50" - это минус 50px от вершины элемента, позволяющий отступы вверху.

Ответ 5

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

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

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

});

Ответ 6

Вы можете попробовать следующее:

Я использовал следующее, работает как шарм:

$("#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;
}

Он также дает эффект отскока, и мне это нравится.