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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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