ページ内リンク先に滑らかにスクロールする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ライブラリ
関連記事
人気記事
最新記事RSS
- JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
- でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
- mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
- これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
- MVPenでアナログの良さを考え直す。
- 第3回「マネタイズHACKS」に参加してみた。
- div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
- jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
- 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
- iPhoneライクにスクロールさせるJavaScript「OverScroll」