Bootstrap手風琴滾動到活動面板標題頂部

我正在查找滾動到我的引導程序3 html/css手風琴當前活動面板標題頂部的代碼。我在stackoverflow上找到的最接近的解決方案是下面的js代碼片段。Bootstrap手風琴滾動到活動面板標題頂部

該代碼片段工作得很好，但是當面板標題被點擊時，頁面會滾動，使得面板內容的頂部與屏幕頂部齊平。有沒有辦法對此進行修改，以便滾動效果將導致面板「標題」（相對於面板內容區域的頂部）在屏幕頂部可見？

$(function() { 
    $('#accordion').on('shown.bs.collapse', function (e) { 
    var offset = $('.panel.panel-default > .panel-collapse.in').offset(); 
    if(offset)$('html,body').scrollTop(offset.top); }); });

讓我知道我是否應該分享自舉手風琴html。

來源

2014-02-22 Jb - DoMETRIQ

我用這個，它可以正常工作，你可以在.offset（）。top之後調整-20，如果你需要稍微調整它。

$(function() { 
    $('#accordion').on('shown.bs.collapse', function (e) { 
     var offset = $('.panel.panel-default > .panel-collapse.in').offset(); 
     if(offset) { 
      $('html,body').animate({ 
       scrollTop: $('.panel-title a').offset().top -20 
      }, 500); 
     } 
    }); 
});

來源

2014-05-01 22:41:42 gigelsmith

它的作用與動畫莫名其妙滑稽，但它仍然是工作;） –

反正是有讓這個滾動的。實際點擊面板標題？它目前正在滾動到第一個，在移動設備上不是很好。 –

@JamesWilson我在下面回答瞭如何針對實際的.panel標題點擊:) – JWPersh

我無法得到答案上述工作，也許我失去了一些東西，但我不能看到上面的scrollTop的線如何與當前打開的手風琴項目，以便用下面的代碼來代替。希望它可以幫助別人：

$(function() { 
$('#accordion').on('shown.bs.collapse', function (e) { 
    var offset = $('.panel.panel-default > .panel-collapse.in').offset(); 
    if(offset) { 
     $('html,body').animate({ 
      scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top 
     }, 500); 
    } 
}); 
});

來源

2015-02-18 20:57:25 Studio4

您的版本使用類選擇器'.panel-group'而不是ID選擇器'#accordion'。後者只有在您的html中定義該ID時纔有效，這不是手風琴的要求。 – jwepurchase

這是針對特定的.panel - 航向點擊按上公認的答案詹姆斯·威爾遜的評論。

$(function() { 
    $('#accordion').on('shown.bs.collapse', function (e) { 
     var offset = $(this).find('.collapse.in').prev('.panel-heading'); 
     if(offset) { 
      $('html,body').animate({ 
       scrollTop: $(offset).offset().top -20 
      }, 500); 
     } 
    }); 
});

所有我從gigelsmith接受的答案改變了'var offset'和scrollTop的目標。

來源

2015-03-22 13:40:46 JWPersh

偉大的解決方案@JWPersh !!!!!我只是複製粘貼，它是完全正常工作！ – FDavidov

通過使用.panel-default作爲.on()的選擇器，您可以滾動到活動面板。

$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) { 
    $('html,body').animate({ 
     scrollTop: $(this).offset().top 
    }, 500); 
});

來源

2016-06-19 07:26:57 Xelio

總是動畫看起來有點太多，所以這是我的版本，只有當標題在可見部分上時才做這項工作。（請注意，我用的是data-accordion-focus應用補丁）

$('[data-accordion-focus]').on('shown.bs.collapse', function (e) { 
 
    var headingTop = $(e.target).prev('.panel-heading').offset().top - 5; 
 
    var visibleTop = $(window).scrollTop(); 
 
    if (headingTop < visibleTop) { 
 
     $('html,body').animate({ 
 
      scrollTop: headingTop 
 
     }, 500); 
 
    } 
 
});

來源

2016-09-02 16:19:22 Nico

如果您使用的是版本4，只需用卡頭替換面板標題類 – marcelo2605

Bootstrap手風琴滾動到活動面板標題頂部

回答

相關問題