: サイト構築 -JavaScript

[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日