簡単。Bootstrap ScrollSpy.js とsmooth-scroll.jsの組み合わせでスムーススクロールさせる。

Bootstrap ScrollSpy.jssmooth-scroll.jsの組み合わせで、ページ内アンカーをスムーススクロールさせるサンプルを作成しました。

ScrollSpy.jsはbootstrapに標準で用意されているjsで、ページをスクロールするとnavのactiveになるものを順々に変化させることが出来ます。

smooth-scroll.jsはjqueryプラグインで、ページ内を指定の場所までゆっくり移動させることが出来ます。

これらの組み合わせで、ランディングページ(LP)などでページの上下を行き来するのに役に立つと思います。

動作サンプル

詳しくは以下をご確認下さい。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

⇒サンプルはこちら

動作としてはヘッダーナビゲーションのリンクをクリックすると、#で記したアンカーの場所へスムーズにスクロールします。

Link1をクリックするとエリアAに移動。Link1の色が変わり現在地がどこか分かる。

スムーススクロール1

Link2をクリックするとエリアBに移動。同じくLink2の色が変わり現在地がどこか分かる仕組みになっています。

スムーススクロール2

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>

詳しくは以下をご確認下さい。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

⇒サンプルはこちら

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です