2011/09/28

[jQuery] 指定した要素まで画面をスクロールさせる方法


フォームで項目が多くて、フォーム全体が1画面内に収まらなかった時に、フォームの先頭にエラー文を出して、その文をクリックするとエラーがあった項目までスクロールさせるという機能をつけたい。

どうやってその場所までスクロールさせるか
↓↓↓

var btn = $(".btn");
var target = 移動先の要素



btn.click(function(){
  $('html,body').animate({

    scrollTop: $target.offset().top}, {
    duration: 400,
    easing: "swing",
    complete: function(){
      //アニメーション後になにかしたいならここに書く
    }
  });
});
ウィンドウのスクロールはhtmlとbody要素のsrollTopの数値を変えるといい。

今回の場合は、エラーになっている項目を目立たせたかったので、その項目のタイトルに背景色をつけた。
アニメーション後にハイライトしたり、点滅させたりでもいいかも。

0 件のコメント:

コメントを投稿