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

サイト構築 -JavaScript

当サイトでも使用しているページ内をスムーズにスクロールするスクリプトの紹介です。

スクリプトの概要
JSファイルのダウンロード
ページの先頭へスムーズにスクロールさせる方法
ページ内の任意の場所にスムーズにスクロールさせる方法
メモ
更新履歴

横移動や別ページからスムーズにスクロールできる方法は、応用編です。
[JS]ページ内をスムーズにスクロールできるスクリプト(応用編)

スクリプトの概要

ページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトです。

動作環境

Win: IE5, IE5.5, IE6, IE7, Firefox1.5, Firefox2, Opera8, Opera9, Safari3.01beta
Mac: Safari1.5, Safari2, Firefox1.5, Firefox2

使用条件

本スクリプトは、非商用利用に限りフリーで使用することができます。詳しくは「表示 - 非営利 - 継承 2.1 日本」を参照ください。

JSファイルのダウンロード

~~page-scroller-201.js (11KB)~~

2007年8月21日、より簡単に設置可能なver.3.00を公開しました。
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3.00

ページの先頭へスムーズにスクロールさせる方法

ページの先頭へ減速しながらスムーズにスクロールさせる方法です。

必要なファイル

page-scroller-201.js
HTMLファイル

スクリプトの使い方

ページの先頭へスムーズにスクロールさせる方法

~~デモページ~~

リンク元の記述

<a href="#top" onclick="toAnchor(); return false;">ページの先頭へ</a>

リンク先の記述

特に無し

スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
例：<script type="text/javascript" src="/js/page-scroller-200.js" charset="utf-8"></script>
ページの先頭へ移動させる箇所に、下記のように記述します。
<a href="#top" onclick="toAnchor(); return false;">ページの先頭へ</a>

※「#top」は、ただのブラウザの拡張機能のため使用は避け、ページの上部に「#pageTop」などの要素を使用するのがよいです。

ページ内の任意の場所にスムーズにスクロールさせる方法

ページの任意の場所へ減速しながらスムーズにスクロールさせる方法です。

スクリプトの使い方：ページの任意の場所にスクロール

ページ内の任意の場所にスクロールさせる方法

~~デモページ~~

ページの全体をdivで括ります。

<div id="allDocument">～</div>

リンク元の記述

<a href="#pageEnd" onclick="toAnchor('pageEnd'); return false;">ページの終わりに移動</a>

リンク先の記述

<p id="pageEnd">ページの終わり</p>

<body>直下に、<div id="allDocument">～</div>をページの全ての要素を括るようにを記述します。
スクロールさせたい要素にidをつけます。
例：<p id="pageEnd">ページの終わり</p>
リンク先には、同じ「id」を記述します。
<a href="#pageEnd" onclick="toAnchor('pageEnd'); return false;">ページの終わりに移動</a>