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>
詳しくは以下をご確認下さい。