JQueryをつかってページのトップへスライドアップする方法
2010年03月11日
このブログやart project teamのサイトでも使用してますが、ページのトップへ移動する方法をアニメーションを使って行う方法。
※この方法はJQueryを使用しますので、まずJQueryをダウンロードをしてください。
JQueryをダウンロードしたら、<head>～</head>の間に、
1 2 |
と記入します。
※必ず、JQueryのファイルを先に書いてください。
HTMLにスクロールさせたい箇所を作ります。
scrollup.jsに下記コードを記入します。
1 2 3 4 5 6 7 8 9 10 | $(function(){ $('#top').click(function(){ $(this).blur(); $($.browser.opera ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body') .animate({scrollTop: 0}, 'fast'); return false; }); }); |
2行目の$(‘#top’)はhtmlで書いた<div id=”top”>のID名になります。
もし、クラスを記入するなら$(‘.class’)とクラス名を記入します。
5行目はoperaにも対応する方法になっています。
operaも対応させる場合はこのように書いてください。
6行目はアニメーションの指定することによって、動きが加わります。
‘fast’は早く移動するという意味になります。
コメントする
：コメント(0)
：トラックバック(0)
コメント：0件
- コメントはありません。
トラックバック：0件
- トラックバックはありません。
