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

Post on:2007年4月5日

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

横移動や別ページからスムーズにスクロールできる方法は、応用編です。
[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>
リンク先の記述
特に無し
  1. スクリプトを使用するHTMLファイルに、外部スクリプトとして参照させます。
    例：<script type="text/javascript" src="/js/page-scroller-200.js" charset="utf-8"></script>
  2. ページの先頭へ移動させる箇所に、下記のように記述します。
    <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>
  1. <body>直下に、<div id="allDocument">～</div>をページの全ての要素を括るようにを記述します。
  2. スクロールさせたい要素にidをつけます。
    例：<p id="pageEnd">ページの終わり</p>
  3. リンク先には、同じ「id」を記述します。
    <a href="#pageEnd" onclick="toAnchor('pageEnd'); return false;">ページの終わりに移動</a>

メモ

このスクリプトを使用してから、早5年以上が経とうとしてます。
最初に実装したサイトは、DIY生命と虎屋で、この２つのサイトは初期版のスクリプトを使用していました。

その後、たくさんのサイトで少しずつバージョンアップを重ね、今日に至ります。

更新履歴

2.01
  • Safari 3.01beta for Win でのスピードを調整しました。

sponsors

top of page

©2024 coliss