skuare.net

ページ内をスクロールさせるjavascript「auto-scrolling-page-navigation」

本文が長くなった時、1ページに収めたい時にはアンカーリンクを使い、該当箇所まで飛ばせることがあります。
しかし、アンカーはがくっと一気に遷移するのが嫌いです。
そんな方には、auto-scrolling-page-navigationを使えばスムースなスクロールが可能になります。

使用方法
prototypeからporotype.js、script.aculo.usからeffects.jsをダウンロードします。
次に以下をheadに書き込みます。
<script src="http://yourdomain/prototype.js" type="text/javascript"<>/script>
<script src="http://yourdomain/effects.js" type="text/javascript"<>/script>

<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element) {
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
</script>
あとは普段通りアンカーリンクを張るだけです。
ページ内をスクロールさせるjavascript「auto-scrolling-page-navigation」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：アイキャッチなメニューを作成するjavascript「Menu with slider」
次の記事：グラフ作成javascriptの最高峰「amCharts」

関連記事

• パスワード強度を視覚的に明示するjavascript「Password Strength」
• 星形投票システムを実現するjavascript「StarBox 」
• プロキシーライクなゲームを作成するjavascript「Blocks.js」
• 画像ギャラリーの定番javascript「LightBox」
• 「prototype Plugins」開設