ページ内をスムーズにスクロールするスクリプトの応用編です。
スクリプトのダウンロードや基本的な使い方は、基本編を参照ください。
[JS]ページ内をスムーズにスクロールできるスクリプト(基本編)
スクロール先の地点をピクセル単位で調整する方法
スクロール先の地点をピクセル単位で自由に調整することができます。
スクリプトの使い方：スクロール先の地点を微調整
スクロール先の地点を微調整をする方法
- ページの全体をdivで括ります。
- <div id="allDocument">～</div>
- リンク元の記述
- <a href="#h201" onclick="toAnchor('h201',100); return false;">h201に移動 -100px手前</a>
- リンク先の記述
- <p id="pageEnd">h201</p>
- <body>直下に、<div id="allDocument">～</div>をページの全ての要素を括るようにを記述します。
- スクロールさせたい要素にidをつけます。
例：<p id="h201">h201</p> - 「toAnchor」に「,100」を追加して記述します。
「100」は100px手前に移動するので、適当な数字を入れても動作します。当サイトでは「13」を入れてます。
<a href="#h201" onclick="toAnchor('h201',100); return false;">h201に移動 -100px手前</a>
横移動有りでスムーズにスクロールさせる方法
任意の場所に縦横にスムーズにスクロールさせる方法です。
スクリプトの使い方：横移動有りでスクロール
横移動有りでスクロールさせる方法
- ページの全体をdivで括ります。
- <div id="allDocument">～</div>
- リンク元の記述
- <a href="#h201" onclick="toAnchor('h201',100,'traverser'); return false;">h201に移動（横移動有り）</a>
- リンク先の記述
- <p id="pageEnd">h201</p>
- <body>直下に、<div id="allDocument">～</div>をページの全ての要素を括るようにを記述します。
- スクロールさせたい要素にidをつけます。
例：<p id="h201">h201</p> - 「toAnchor」に「,'traverser'」を追加して記述します。
<a href="#h201" onclick="toAnchor('h201',100,'traverser'); return false;">h201に移動（横移動有り）</a>
別ページからスムーズにスクロールさせる方法
別のページからリンクして、スムーズにスクロールさせる方法です。
スクリプトの使い方：別ページからスクロール
別ページからスクロール
- リンク元の記述
- <a href="test-6.html#h201" onclick="location.href='test-6.html?pSch201'; return false;">別ページのh201にリンクしてスクロール</a>
- リンク先の記述
- スクリプトを参照します。
例：<script type="text/javascript" src="/js/page-scroller-200.js" charset=”utf-8″></script>- ページの全体をdivで括ります。
<div id="allDocument">～</div>- リンク先にidを記述します。
<p id="h201">h201</p>
- リンク元は、下記のように記述します。
<a href="test-6.html#h201" onclick="location.href='test-6.html?pSch201'; return false;">別ページのh201にリンクしてスクロール</a> - リンク先は、<body>直下に、<div id="allDocument">～</div>をページの全ての要素を括るようにを記述します。
- スクロールさせたい要素にidをつけます。
例：<p id="h201">h201</p>
Post on:2007年4月5日
