Question

我有一个包含巨大可滚动数据的面板，一旦向下滚动内容并折叠面板/来自其他页面然后数据设置为顶部，向下滚动保持相同，它不会重置到顶部位置。我试过下面的代码，但没有运气请任何人帮我解决这个问题

 $('#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

请检查这个..在第一个面板中有巨大的内容，也可滚动..一旦我打开并滚动内容然后我关闭/隐藏/切换面板但内容并非全部重置为顶部

Answer 1

你只需要添加这个jquery

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

Working Snippet

Bootstrap可折叠面板内容重置为顶部

1 个答案: