カプセル・メニューにおけるスクロールスパイ ≪ スクロールスパイ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

ページ内リンク用カプセル・メニューにおけるスクロールスパイ使用方法。

カプセル・メニューにスクロール連動させたい要素に対し、スタイルシートでoverflow: scroll;を指定する。
カプセル・メニューにスクロール連動させたい要素のdata-spy属性に、scrollを指定する。
カプセル・メニューにスクロール連動させたい要素のdata-target属性に、スクロールに連動させたいカプセル・メニューのid属性値やclass属性値を指定する。

サンプル

ソースコード

HTML

<body role="document" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="113">

	<header class="container-fluid">
		<div class="container">
			<div id="sampleHeader" class="container-fluid">
				<h1>サンプル</h1>	
				<div id="sampleScrollSpy">
					<ul class="nav nav-pills">
						<li><a class="linkInThePage" href="#sampleA">ページ内リンクＡ</a></li>
						<li><a class="linkInThePage" href="#sampleB">ページ内リンクＢ</a></li>
						<li><a class="linkInThePage" href="#sampleC">ページ内リンクＣ</a></li>
					</ul>
				</div>
			</div>
		</div>
	</header>

	<div class="container-fluid">
		<div class="container">
			<div id="sampleMainContents">
				<p><a href="../javascript/scrollspy-pills.html" target="_blank">カプセル・メニューにおけるスクロールスパイ</a>のサンプル。</p>
				<h2 id="sampleA">Ａ</h2>
				<ol>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				</ol>
				<h2 id="sampleB">Ｂ</h2>
				<ol>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				</ol>
				<h2 id="sampleC">Ｃ</h2>
				<ol>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
					<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
				</ol>
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script src="http://foo.tld/jquery/animatescroll.js-master/animatescroll.noeasing.js"></script>
	<script>
		$( function() {
			$('.linkInThePage').click( function () {
				var hrefValue = $(this).attr( 'href' );
				$(hrefValue).animatescroll({padding:112});
			} );
		} );
	</script>
</body>

CSS

body {
	padding-top: 112px;
}
#sampleHeader {
	position: fixed;
	top: 0px;
	height: 112px;
	background-color: #ddd;
}
#sampleMainContents {
	padding: 2em;
	border-left: 1px solid #ddd;
}