見出しを自動で付けてスムーススクロールさせるJavaScript「OnePage jQuery Plugin」

昨今ミニマムな1ページのデザインが増えています。
その際にJavaScriptを使用し、セクションごとにスムーススクロールさせるケースが多いです。
それを簡単に実現するのが「OnePage jQuery Plugin」です。
見出しを自動で付けてスムーススクロールさせるJavaScript「OnePage jQuery Plugin」サンプル

使用方法
OnePage jQuery PluginからOnePage.jQuery.Plugin.1.2.jsをjQueryからjquery.js、jQuery Easing Pluginからjquery.easing.1.3.jsをダウンロードします。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="OnePage.jQuery.Plugin.1.2.js" type="text/javascript"></script>
<script>
$(function () {
$('#nav').OnePage({
topOffset : '320', //トップ開始位置、ネガティブも可
easing: 'easeOutExpo' //easingプラグインから
});
});
</script>

次に各セクションを記述します。
<div class="area" title="アンカータイトル1" id="ユニークな値1"> CONTENT1 </div>
<div class="area" title="アンカータイトル2" id="ユニークな値2"> CONTENT2 </div>
<!-- 個数分 -->

最後にナビ部分のidを振れば完成です。
<div id="nav"></div>
見出しを自動で付けてスムーススクロールさせるJavaScript「OnePage jQuery Plugin」サンプル

sponsors

「見出しを自動で付けてスムーススクロールさせるJavaScript「OnePage jQuery Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > 見出しを自動で付けてスムーススクロールさせるJavaScript「OnePage jQuery Plugin」