如何設置scrollTop的自舉標籤

Question

\t $('#s5').on('click', function (event) { 
 
\t  $('.nav-tabs a[href="#listcontent"]').tab('show'); 
 
\t  $('#side').animate({ 
 
\t   scrollTop: $('#stage5').offset().top 
 
\t  }, 2000); 
 
\t });

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
.fill { 
 
    padding: 0; 
 
    min-height: 100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    min-width: 100%; 
 
} 
 
.container-side { 
 
    padding: 10px 0 10px 15px; 
 
    min-height: 100%; 
 
    height: 100%; 
 
} 
 
.tab-content { 
 
    overflow: auto; 
 
    height: calc(100vh - 202px); 
 
    /* 100vh = 100% height of viewport. 182px = 100px (#header) + 20px (.container-side) + 42px (.nav-tabs) + 40px (#footer) */ 
 
    height: -webkit-calc(100vh - 202px); 
 
    height: -moz-calc(100vh - 202px); 
 
} 
 
.container-side ul { 
 
    margin-right: 15px; 
 
} 
 
.fixheight { 
 
    min-height: 200px; 
 
} 
 
#sidecontent { 
 
    width: 100%; 
 
    min-width: 100%; 
 
    height: calc(100vh - 197px); 
 
    /* 100vh = 100% height of viewport. 197px = 192px (.tab-content) + 5px */ 
 
    height: -webkit-calc(100vh - 207px); 
 
    height: -moz-calc(100vh - 207px); 
 
} 
 
body { 
 
    padding-top: 100px; 
 
    padding-bottom: 40px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container-fluid fill"> 
 
    <div class="row-fluid fill"> 
 
     <div class="col-xs-12 col-sm-5 col-md-5 container-side"> 
 
      <ul class="nav nav-tabs" role="tablist"> 
 
       <li role="presentation" class="active"><a href="#content" data-toggle="tab" role="tab">Content</a> 
 

 
       </li> 
 
       <li role="presentation"><a href="#listcontent" data-toggle="tab" role="tab">listcontent</a> 
 

 
       </li> 
 
      </ul> 
 
      <div id="side" class="tab-content"> 
 
       <div id="content" class="container-fluid tab-pane fade in active"> 
 
        <h2>Route 1</h2> 
 

 
        <div>Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus.</div> 
 
       </div> 
 
       <div id="listcontent" class="container-fluid tab-pane fade"> 
 
        <div id="stage1" class="fixheight"> 
 
         <h2>Stage 1</h2> 
 

 
        </div> 
 
        <div id="stage2" class="fixheight"> 
 
         <h2>Stage 2</h2> 
 

 
        </div> 
 
        <div id="stage3" class="fixheight"> 
 
         <h2>Stage 3</h2> 
 

 
        </div> 
 
        <div id="stage4" class="fixheight"> 
 
         <h2>Stage 4</h2> 
 

 
        </div> 
 
        <div id="stage5" class="fixheight"> 
 
         <h2>Stage 5</h2> 
 

 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-7 col-md-7 container-map"> 
 
      <div id="map"> 
 
       <div id="s5">stage5</div> 
 
      </div> 
 
     </div> 
 
     <div id="sidebar"></div> 
 
    </div> 
 
</div>

這裏是jsfidle裏面的代碼：http://jsfiddle.net/BrunoD/fn3L0v20/1/

上stage5鏈接點擊後，我改變了標籤，listcontent選項卡，然後我想滾動條位於stage5 div內listcontent div

不幸的是滾動條的位置不移動。

Answer 1

您可以將事件用於第一個選項卡更改。

$("#map a").on('click', function(event) { 
// Prevent default anchor click behavior 
event.preventDefault(); 
var hash = this.hash; 

if (window.location.hash) { 
    window.location.hash = hash; 
} 

$tab = $('#listcontentA'); 
$tab.tab('show'); 

$tab.on('shown.bs.tab', function() { 
    window.location.hash = hash; 
}); 
}); 

http://jsfiddle.net/fn3L0v20/3/

是你需要什麼？ 。

Answer 2

\t $('#map #s1').on('click', function(event) { 
 
\t \t var atab = $('.nav-tabs .active').text(); 
 
\t \t if (atab=='listcontent') $('#side').animate({scrollTop: $('#stage1').position().top}, 2000); 
 
\t \t else { 
 
\t \t \t $('.nav-tabs a[href="#listcontent"]').tab('show').on('shown.bs.tab', function() { 
 
\t \t \t \t $('#side').animate({scrollTop: $('#stage1').position().top}, 2000); 
 
\t \t \t }); 
 
\t \t } 
 
    }); 
 
\t $('#map #s3').on('click', function(event) { 
 
\t \t var atab = $('.nav-tabs .active').text(); 
 
\t \t if (atab=='listcontent') $('#side').animate({scrollTop: $('#stage3').position().top}, 2000); 
 
\t \t else { 
 
\t \t \t $('.nav-tabs a[href="#listcontent"]').tab('show').on('shown.bs.tab', function() { 
 
\t \t \t \t $('#side').animate({scrollTop: $('#stage3').position().top}, 2000); 
 
\t \t \t }); 
 
\t \t } 
 
    }); 
 
\t $('#map #s5').on('click', function(event) { 
 
\t \t var atab = $('.nav-tabs .active').text(); 
 
\t \t if (atab=='listcontent') $('#side').animate({scrollTop: $('#stage5').position().top}, 2000); 
 
\t \t else { 
 
\t \t \t $('.nav-tabs a[href="#listcontent"]').tab('show').on('shown.bs.tab', function() { 
 
\t \t \t \t $('#side').animate({scrollTop: $('#stage5').position().top}, 2000); 
 
\t \t \t }); 
 
\t \t } 
 
    });

html, body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
    height: 100%; 
 
} 
 

 
.fill { 
 
\t padding: 0; 
 
    min-height: 100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    min-width: 100%; 
 
} 
 

 
.container-side { 
 
\t padding: 10px 0 10px 15px; 
 
    min-height: 100%; 
 
    height: 100%; 
 
} 
 

 
.tab-content { 
 
\t overflow: auto; 
 
\t height: calc(100vh - 202px); /* 100vh = 100% height of viewport. 182px = 100px (#header) + 20px (.container-side) + 42px (.nav-tabs) + 40px (#footer) */ 
 
\t height: -webkit-calc(100vh - 202px); 
 
\t height: -moz-calc(100vh - 202px); 
 
} 
 

 
.container-side ul { 
 
\t margin-right: 15px; 
 
} 
 

 
.fixheight { 
 
\t min-height: 200px; 
 
} 
 

 
#sidecontent { 
 
    width: 100%; 
 
    min-width: 100%; 
 
\t height: calc(100vh - 197px); /* 100vh = 100% height of viewport. 197px = 192px (.tab-content) + 5px */ 
 
\t height: -webkit-calc(100vh - 207px); 
 
\t height: -moz-calc(100vh - 207px); 
 
} 
 

 
body { 
 
\t padding-top: 100px; 
 
\t padding-bottom: 40px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container-fluid fill"> 
 
\t <div class="row-fluid fill"> 
 
\t \t <div class="col-xs-12 col-sm-5 col-md-5 container-side"> 
 
\t \t \t <ul class="nav nav-tabs" role="tablist"> 
 
\t \t \t \t <li role="presentation" class="active"><a href="#content" data-toggle="tab" role="tab">Content</a></li> 
 
\t \t \t \t <li role="presentation"><a href="#listcontent" data-toggle="tab" id="listcontentA" role="tab">listcontent</a></li> 
 
\t \t \t </ul> 
 
\t \t \t <div id="side" class="tab-content"> 
 
\t \t \t \t <div id="content" class="container-fluid tab-pane fade in active"> 
 
\t \t \t \t \t <h2>Route 1</h2> 
 
\t \t \t \t \t <div> 
 
\t Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus. \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="listcontent" class="container-fluid tab-pane fade"> 
 
\t \t \t \t \t <div id="stage1" class="fixheight"><h2>Stage 1</h2></div> 
 
\t \t \t \t \t <div id="stage2" class="fixheight"><h2>Stage 2</h2></div> 
 
\t \t \t \t \t <div id="stage3" class="fixheight"><h2>Stage 3</h2></div> 
 
\t \t \t \t \t <div id="stage4" class="fixheight"><h2>Stage 4</h2></div> 
 
\t \t \t \t \t <div id="stage5" class="fixheight"><h2>Stage 5</h2></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-xs-12 col-sm-7 col-md-7 container-map"> 
 
\t \t \t <div id="map"> 
 
\t \t \t \t <div id="s1">stage1</div> 
 
\t \t \t \t <div id="s3">stage3</div> 
 
\t \t \t \t <div id="s5">stage5</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="sidebar"></div> 
 
    </div> 
 
</div>

$（ '導航的選項卡。主動'）文本（）;提供活動選項卡。如果listcontent沒有被激活，我們需要等待標籤被激活才能移動scroolbar。

Answer 3

看起來像這不是通過在選項卡div上設置scrollTop直接完成的。 下面的答案給出了一個可行的解決方案：https://stackoverflow.com/a/31394286/2143734

對於你的情況，我會做這樣的：

$('html, body, nav').animate({ 
    scrollTop: $("#your-div").prop('scrollHeight') 
}, 500);