smoothscroll
まずは実装サンプルを確認
HTML
smoothscrollを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。
<!--ジャンプリンク--> <p><a href="#saitama">埼玉県へリンク</a></p> <!--ジャンプ先--> <section id="tokyo" class="const">東京都</section> <section id="saitama" class="const">埼玉県</section> <section id="kanagawa" class="const">神奈川県</section> <section id="chiba" class="const">千葉県</section>
JSファイルの準備
テンプレートに既にsmoothScroll.js が読み込まれているので、特に準備をする必要はありません。参考に、以下が、smoothScroll.jsの記述内容です。
jQuery(function(){ jQuery('a[href^="#"]').click(function() { var speed = 400; //スクロールの速度(1,000分の1秒単位) var href= jQuery(this).attr("href"); var target = jQuery(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });