Bootstrap可摺疊面板內容重置爲頂部

我有面板，其中包含巨大的可滾動數據，一旦向下滾動內容並摺疊面板/從其他頁面出來，然後數據設置爲頂部，向下滾動保持不變，不重置爲頂部位置。我曾嘗試下面的代碼，但沒有運氣請人幫助我獲得解決這個Bootstrap可摺疊面板內容重置爲頂部

$('#techAssmnt').on('show.bs.collapse', function (e) { 

     //setTimeout(function(){ 
     //$("techAssmnt").animate({ 
      //scrollTop: $('#page-top-wrapper').offset().top 
      //}, 800, 'swing', 
      //function() {}); 
      //},500); 

     //$("div.assessmentMainDiv").scrollTop(0); 
     //$("#Section_1").animate({ scrollTop: 0 }, "slow"); 

     $("#Section_1").animate({ scrollTop: 
     $('#templateCollapse3262').offset().top }, 800, 'swing', function() { 
      }); 

     //$("div.assessmentMainDiv").css(["top","1px", "left","0", 'right':'0','bottom':'0', 'overflow':'auto']); 

     $("div.assessmentMainDiv").css({ 
       'top' : '1px', 
       'left' : '0', 
       'right' : '0', 
       'bottom' : '0', 
       'overflow' : 'auto' 
      }); 
     });

下面的代碼我也試過

$('#techAssmnt').on('shown.bs.collapse', function (e) { 
     //alert("sasdas") 
     var panelHeadingHeight = $('.panel-heading').height(); 
     var animationSpeed = 500; // animation speed in milliseconds 
     var currentScrollbarPosition = $(document).scrollTop(); 
     var topOfPanelContent = $(e.target).offset().top; 

     if (currentScrollbarPosition > topOfPanelContent - panelHeadingHeight) { 
      $("#Section_1").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed); 
     } 
    });

https://www.bootply.com/8bGdJgkmUv

請這個..在第一個面板有巨大的內容，也滾動..一旦我打開並滾動的內容，然後我關閉/隱藏/切換面板，但內容並不全部重置頂部

來源

2017-07-18 Mallikarjun Hampannavar

才能添加工作撥弄？所以這將有助於其他成員可以幫助你。 –

@NiravJoshi https://www.bootply.com/8bGdJgkmUv請檢查這個..在第一個面板有巨大的內容，也滾動..一旦我打開並滾動內容，然後我關閉/隱藏/切換面板，但內容是不是全部重置爲頂部 –

你只需要添加這個jQuery

$(".collapse").on('hide.bs.collapse', function(){ 
    $(this).children().scrollTop(0); 
});

Working Snippet

來源

2017-07-18 12:44:32

我在移動中使用它..它不工作..在你的例子中它的工作正常 –

你有沒有爲它做出正確的代碼？如果是比做它的片段..讓我再檢查一遍 –

我不能讓我的代碼片段bcoz它的動態綁定從web api ..我的代碼是完全相同的只是你的工作片段，但我不知道爲什麼它不是工作 –

Bootstrap可摺疊面板內容重置爲頂部

回答

相關問題