jQueryのプラグイン「Page Scroller」の機能を追加しました:更新- 3.0.8

ページ内をスムーズにスクロールできるスクリプト:Page Scrollerの最新版「3.0.8」をリリースしました。

簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3

主な変更点は、下記の通りです。

3.0.8
  • スピードの調整が可能になりました。
  • 動作しないエリアを指定できるようになりました。
  • area要素を使用したイメージマップでも利用できるようになりました。

詳しくは以下をどうぞ。

[ad#ad-2]

ver 3.0.7からのアップデート方法

スクリプトの既存の仕様に変更はありません。
同様に、ご利用いただけます。

スクロールのスピードを調整する方法

スクロールのスピードを調整できるオプションです。

スクロールのスピードを調整

スクロールのスピードを調整する方法

スクロールのスピードを任意に変更することができます。
※デモはスピードを速くしています。

設定の記述
<script type="text/javascript">
adjSpeed = .5;
</script>
設定する数値
速くする場合は数値を少なく(例:0.5)、
遅くする場合は数値を多く(例:1.5)してください。
基準値:1

[ad#ad-2]

動作しないエリアを設定する方法

ページスクロールが動作しないエリアを設定できるオプションです。
これにより、#リンクでタブを切り替えるコンテンツなどと併用することが可能です。

動作しないエリアを設定

動作しないエリアを設定する方法

ページスクロールが動作しないエリアを設定できます。

リンク先の記述
<p id="h2-01">h2-01</p>
リンク元の記述
<a href="#h2-01" class="nopscr">h2-01に移動</a>(除外対象)
  1. リンクの記述は、下記のようにします。
    <a href="#h2-01" class="nopscr">h2-01に移動</a>(除外対象)
    

    a要素に「class="nopscr"」を追加します。
    適用箇所はa要素だけでなく、div要素に追加し内包箇所に適用することもできます。デモページでは、タブコンテンツを内包するdiv要素にも追加し、タブコンテンツ全てでページスクロールを無効化しています。
    ※タブのコンテンツ箇所だけを有効化したい場合は、タブのみに設定してください。

area要素を使用したイメージマップでの利用方法

area要素でもa要素と同様にページスクロールを利用できるようになりました。

イメージマップでの利用

イメージマップでの利用方法

area要素を使用したイメージマップで利用することができます。

リンク先の記述
<p id="h2-01">h2-01</p>
リンク元の記述
<area shape="rect" coords="0,0,75,75" href="#h2-01" alt="h2-01に移動">

sponsors

top of page

©2018 coliss