[JS]ページ内をスムーズにスクロールできるスクリプト(応用編)

ページ内をスムーズにスクロールするスクリプトの応用編です。

スクリプトのダウンロードや基本的な使い方は、基本編を参照ください。

[JS]ページ内をスムーズにスクロールできるスクリプト(基本編)

スクロール先の地点をピクセル単位で調整する方法

スクロール先の地点をピクセル単位で自由に調整することができます。

スクリプトの使い方:スクロール先の地点を微調整

スクロール先の地点を微調整をする方法

デモページ

ページの全体をdivで括ります。
<div id="allDocument">~</div>
リンク元の記述
<a href="#h201" onclick="toAnchor('h201',100); return false;">h201に移動 -100px手前</a>
リンク先の記述
<p id="pageEnd">h201</p>
  1. <body>直下に、<div id="allDocument">~</div>をページの全ての要素を括るようにを記述します。
  2. スクロールさせたい要素にidをつけます。
    例:<p id="h201">h201</p>
  3. 「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>
  1. <body>直下に、<div id="allDocument">~</div>をページの全ての要素を括るようにを記述します。
  2. スクロールさせたい要素にidをつけます。
    例:<p id="h201">h201</p>
  3. 「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>
  1. リンク元は、下記のように記述します。
    <a href="test-6.html#h201" onclick="location.href='test-6.html?pSch201'; return false;">別ページのh201にリンクしてスクロール</a>
  2. リンク先は、<body>直下に、<div id="allDocument">~</div>をページの全ての要素を括るようにを記述します。
  3. スクロールさせたい要素にidをつけます。
    例:<p id="h201">h201</p>

top of page

©2017 coliss