jQuery

【jQuery】ページセクションをナビゲートすることができるSmart Scroll

August 29, 2018
Smart Scroll

Smart Scrollはページセクションをナビゲートすることができる軽量のjQueryプラグイン。

How to use

スマートスクロールの初期化

 smartScroll.init({
                  speed: 1000, // default 500
                  addActive: true, // default true
                  activeClass: "active", // default active
                  offset: 150 // default 100
              });

ナビゲーションリンクにdata-scroll属性を追加

  <nav>
         <ul>
             <li><a href="#!" data-scroll="page1">page1</a></li>
             <li><a href="#!" data-scroll="#page2">page2</a></li>
             <li><a href="#!" data-scroll="page3">page3</a></li>
             <li><a href="#!" data-scroll="#page4">page4</a></li>
             <li><a href="#!" data-scroll="page5">page5</a></li>
         </ul>
     </nav>

セクションに使用されているIDと同じ値を持つ必要があります

  <div id="page3">page3</div>
  
  <li><a href="#!" data-scroll="page3">page3</a></li>