ページ内リンクをスムーズスクロールする：JavaScriptサンプル

JavaScript

ページ内リンクをスムーズスクロールする

ページ内リンクをクリックすると通常は一瞬でスクロールされて画面が切り替わりますが、慣れていない人にはページが他のページへ移動したかと思ってしまうこともあると思います。スムーズスクロール機能を使うことで、ページ内でスクロールしているということが分かりやすくなります。

ご利用について

個人利用の場合はフリーでご自由にお使いいただけます。
法人・商用利用の場合はWEB上手(www.web-jozu.com)へのリンクを貼ってください。
個人利用の場合でもリンクを貼っていただけると、幸いです。

法人・商用利用の方でリンクを貼っていただけない場合はシェアウェア料金をお支払いいただくことで、ご自由にお使いいただけます。料金は以下のVectorのシェアレジでお支払いいただけます。
※著作権は放棄していません。詳細はご利用規定をご覧ください。

【料金】　￥1,000 （税込）　Vectorの手数料を（含みます）
Vectorシェアレジでのお支払いはこちら　（お支払い方法について）

ダウンロードおよび設置方法

スムーズスクロールの必要ファイルのダウンロード（1KB）
　　　※ご利用規定に同意出来る方のみご利用ください。

特長

速度や滑らかさを変更出来ます。
JavaScriptを切っている場合は通常のページ内リンクが機能します。

「更新履歴」の場所までスムーズスクロールする

まずはスムーズスクロールの必要ファイルをダウンロードします。
「ディレクトリ構成」に従って「sm_scroll」フォルダをアップロードしてください。
今回はアップロードの際は、全て「アスキーモード」でアップロードします。
「記述」に従ってスムーズスクロールを設置したいページに記述します。
リンク先には通常通り<a name="任意名前"></a>に加えて id="任意名前"を入れます。
リンク元には通常通り<a href="#任意名前">に加えて以下の記述を加えます。
onclick="smScroll(this); return false;"
「サンプル」のように、スムーズスクロールが機能すれば完成です。

home
├ index.html （スムーズスクロール設置ページ）
└ sm_scroll
└ sm_scroll.js

<html>
<head>
<title>スムーズスクロール設置ページ</title>

<script type="text/javascript" src="sm_scroll/sm_scroll.js"></script>

</head>
<body>

<a name="hoge" id="hoge"></a>
※「hoge」は任意名前に置き換えてください。
　　　　　　　　・
　　　　　　　　・
　　　　　　　　・
<a href="#hoge" onclick="smScroll(this); return false;">ページの先頭へ</a>

</body>
</html>

更新履歴

2009/05/17　　ver1.0.0	・新規公開

ページの先頭へ戻る（サンプル）