offsetオプションを指定し、JavaScriptで呼び出す ≪ スクロールスパイ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

offsetオプションを指定し、JavaScriptで呼び出す方法。

スクロールスパイにおけるoffsetオプションはと、ウィンドウ上部からのオフセット値をピクセル単位で設定できるオプションのこと。

構文

$('セレクター１').scrollspy(
	{
		target: 'セレクター２',
		offset: 数値
	}
);

「セレクター１」には、スクロールする要素を指定する。

「セレクター２」には、連動させたいナビゲーションを指定する。

「数値」には、ウィンドウ上部からのオフセット値をピクセル単位の数値で指定する。

サンプル

別窓で表示

ソースコード

HTML

<body role="document" id="top">

	<div id="sampleScrollSpy">
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sampleNavbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand linkInThePage" href="#top">
						タイトル
					</a>
				</div>
			
				<div class="collapse navbar-collapse" id="sampleNavbar">
					<ul class="nav navbar-nav">
						<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>
					<p class="navbar-text navbar-right">これはサンプル。</p>
				</div>
			</div>
		</nav>
	</div>

	<div class="jumbotron">
		<div class="container">
			<h1>サンプル</h1>
			<p><a href="../javascript/scrollspy-navbar-javascript.html" target="_blank">JavaScriptでスクロールスパイを呼び出す</a>サンプル。</p>
		</div>
	</div>
	<div class="container">
		<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>

	<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://bootstrap3.cyberLab.info/jquery/animatescroll.js-master/animatescroll.noeasing.js"></script>
	<script>
		$( function() {
			$('.linkInThePage').click( function () {
				var hrefValue = jQuery(this).attr( 'href' );
				$(hrefValue).animatescroll({padding:70});
			} );
		} );
		$('body').scrollspy({ target: '#sampleScrollSpy', offset: 71 });
	</script>
</body>

jQueryのAnimateScrollプラグインも使用している。