スルスルとページ内を移動するSmooth Anchors

ページ内のリンクをスルスルゆるゆると移動していくjQueryプラグインSmooth Anchors。
ゆったりとした高級感のあるページに仕上がりますので、地味ですが割と印象に残る「いぶし銀」的なスクリプトです。

実装はとても簡単。


動作サンプル

１）LINK-01の詳細はココをクリック！
２）LINK-02の詳細はココをクリック！
３）LINK-03の詳細はココをクリック！

キーン

LINK-01の詳細

聞いたことあるような無いような・・・。
お役に立てず申し訳ありません。

▲サンプルの先頭に戻る

キーン

LINK-02の詳細

それは難しいですねぇ。
書籍などで勉強してみてはいかがですか？

▲サンプルの先頭に戻る

キーン

LINK-03

まったくわかりませんね。
まぁ、知っていても教えませんけどね。

▲サンプルの先頭に戻る

キーン

ダウンロード

Smooth Anchors jQuery Plugin
Setupの「Download the Smooth Anchors plugin.」クリックでjquery.jsも同梱されたフォルダがダウンロードされます。

実装手順

サーバーにSmooth_Anchorsフォルダのjsフォルダ（jquery-1.3.2.jsとjquery.smoothanchors.js以外は不要）をアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
移動速度は「fast」「normal」「slow」から選択。もちろんslow推奨です。

<script type="text/javascript" src="http://サイトURL/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://サイトURL/js/jquery.smoothanchors.js"></script>
<script>
$(document).ready(function(){
$.smoothAnchors("slow");
});
</script>

あとは通常通りにページ内リンクを貼るだけ。
う～ん、簡単簡単。

<ul>
<li><a href="#link01">LINK-01</a></li>
<li><a href="#link02">LINK-02</a></li>
<li><a href="#link03">LINK-03</a></li>
</ul>
 
<a name="link01"></a>
LINK-01
コンテンツ-01
<a name="link02"></a>
LINK-02
コンテンツ-02
<a name="link03"></a>
LINK-03
コンテンツ-03

なんだろう・・・。
このスクリプト、かなり好きです。

▲サンプルの先頭に戻る

«
»

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment