ページ内で簡単にスクロールさせる方法
jQuery 1.2 以降だと scrollTop(と scrollLeft)という疑似スタイルが利用できる
<html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html>
「ページの先頭へ」というリンクをクリックしたときに,スムーズにスクロールしたい場合
$(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(this).blur(); $('html,body').animate({ scrollTop: 0 }, 'slow'); return false; }); } });
トップに移動したときにロケーションバーの URL が # 付きになるのがイヤ & デフォルト動作を回避するために return false;でかえすようにする。
他のアンカーへ飛ぶとき
var targetOffset = $('#hogehoge').offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000);
ターゲットの絶対位置を offset() 関数で取得して,0 の代わりにそれを scrollTop に指定することで,ターゲットまでスクロールさせることが可能。