skuare.net

ページ内リンク先に滑らかにスクロールする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」サンプル

｜ ｜ ｜ ｜ ｜ ｜

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

関連記事

• マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」
• [jQuery]spinner
• [jQuery]SerialScroll
• [jQuery]scrollable HTML table
• [jQuery]Pagination Plugin