如何在引导选项卡中设置scrollTop

时间：2015-09-07 10:56:23

标签： twitter-bootstrap scrolltop 

	$('#s5').on('click', function (event) {
	    $('.nav-tabs a[href="#listcontent"]').tab('show');
	    $('#side').animate({
	        scrollTop: $('#stage5').offset().top
	    }, 2000);
	});
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上

不幸的是，滚动条的位置没有移动。

3 个答案:

答案 0 :(得分：0)

您可以将事件用于第一个标签更改。

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

这就是你需要的吗？

答案 1 :(得分：0)

＆＃13;
＆＃13; 
	$('#map #s1').on('click', function(event) {
		var atab = $('.nav-tabs .active').text();
		if (atab=='listcontent') $('#side').animate({scrollTop: $('#stage1').position().top}, 2000);
		else {
			$('.nav-tabs a[href="#listcontent"]').tab('show').on('shown.bs.tab', function () {
				$('#side').animate({scrollTop: $('#stage1').position().top}, 2000);
			});
		}
    });
	$('#map #s3').on('click', function(event) {
		var atab = $('.nav-tabs .active').text();
		if (atab=='listcontent') $('#side').animate({scrollTop: $('#stage3').position().top}, 2000);
		else {
			$('.nav-tabs a[href="#listcontent"]').tab('show').on('shown.bs.tab', function () {
				$('#side').animate({scrollTop: $('#stage3').position().top}, 2000);
			});
		}
    });
	$('#map #s5').on('click', function(event) {
		var atab = $('.nav-tabs .active').text();
		if (atab=='listcontent') $('#side').animate({scrollTop: $('#stage5').position().top}, 2000);
		else {
			$('.nav-tabs a[href="#listcontent"]').tab('show').on('shown.bs.tab', function () {
				$('#side').animate({scrollTop: $('#stage5').position().top}, 2000);
			});
		}
    });
＆＃13; 
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;
}
＆＃13; 
<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" id="listcontentA" 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="s1">stage1</div>
				<div id="s3">stage3</div>
				<div id="s5">stage5</div>
			</div>
		</div>
		<div id="sidebar"></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

$（＆＃39; .nav-tabs .active＆＃39;）。text（）;提供活动选项卡。如果未激活listcontent，我们需要等待标签被激活才能移动scroolbar。

答案 2 :(得分：0)

看起来这不是通过在tab div上设置scrollTop直接完成的。 以下答案提供了一个有效的解决方案：https://stackoverflow.com/a/31394286/2143734

对于你的情况，我会这样做：

$('html, body, nav').animate({
  scrollTop: $("#your-div").prop('scrollHeight')
}, 500);
相关问题
最新问题