skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

ページ内リンク先に滑らかにスクロールするjavascript「SmoothScroll」

｜ ｜ ｜ ｜ ｜ ｜ ｜

同一ページのコンテンツが増加した時、アンカーを使用して移動させることがあります。
しかし、移動する際の急激な変化に疑問が残ります。
as day oass byのSmooth scrolling demoで公開しているjavascriptを加えるだけで、既存のHTMLにスムーズにページ内リンク移動機能を追加できます。

使用方法
Smooth scrolling demoからsmoothscroll.jsをダウンロードし、head内に埋め込めば完成です。
<script type="text/javascript" src="http://yourdomain/smoothscroll.js"></script>
あとは従来通りにHTMLを記述すればOKです。
HTML記述例
<!-- リンク元 -->
<a href="#Down">Down</a>
<!-- リンク先 -->
<a name="Down"></a>
＊smoothscroll.jsファイル142行目でスピード調整が出来ます
ss.STEPS = 25; //スピード（数値が低いほど高速）
ページ内リンク先に滑らかにスクロールするjavascript「SmoothScroll」サンプル

記事作成：2007年08月20日

前の記事：お手軽にtooltipsを実現するjavascript「GoodLookingTooltips」
次の記事：Javascriptライブラリ