Bootstrap ScrollSpy.js とsmooth-scroll.jsの組み合わせで、ページ内アンカーをスムーススクロールさせるサンプルを作成しました。
ScrollSpy.jsはbootstrapに標準で用意されているjsで、ページをスクロールするとnavのactiveになるものを順々に変化させることが出来ます。
smooth-scroll.jsはjqueryプラグインで、ページ内を指定の場所までゆっくり移動させることが出来ます。
これらの組み合わせで、ランディングページ(LP)などでページの上下を行き来するのに役に立つと思います。
動作サンプル
詳しくは以下をご確認下さい。
動作としてはヘッダーナビゲーションのリンクをクリックすると、#で記したアンカーの場所へスムーズにスクロールします。
Link1をクリックするとエリアAに移動。Link1の色が変わり現在地がどこか分かる。
Link2をクリックするとエリアBに移動。同じくLink2の色が変わり現在地がどこか分かる仕組みになっています。
javascriptのコード
<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="js/smooth-scroll.js"></script>
<script>
//scrollspyのnavbarを指定する
$('body').scrollspy({ target: '#navbar-example' })
//スムーススクロールを起動する
smoothScroll.init({
selector: '[data-scroll]',
selectorHeader: '[data-scroll-header]',
speed: 300,
easing: 'easeOutQuad',
offset: 0,
updateURL: true,
callback: function () {}
}) ;
//スマホ表示の際、開閉メニューの項目を押したときにメニューを閉じる
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
});
</script>
HTMLのコード
<body role="document" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="72" id="top">
<div id="sampleScrollSpy">
<nav class="navbar navbar-inverse navbar-fixed-top" data-scroll-header>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sampleNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="sampleNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#AreaA" data-scroll>Link1</a></li>
<li><a href="#AreaB" data-scroll>Link2</a></li>
<li><a href="#AreaC" data-scroll>Link3</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<main id="tops">
<nav>
<h1>Bootstrapとsmooth scroll の組み合わせサンプル</h1>
<p>
<a href="https://github.com/cferdinandi/smooth-scroll">GitHub</a>
</p>
<hr>
</nav>
<section id="AreaA">
<h2>エリアA</h2>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
</section>
<section id="AreaB">
<h2>エリアB</h2>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
</section>
<section id="AreaC">
<h2>エリアC</h2>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
<br>.
</section>
<p>
<a data-scroll class="btn btn-default btn-block btn-lg" href="#" role="button">TOP<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></a>
</p>
</main>
</div>
</body>
詳しくは以下をご確認下さい。
