フォームで項目が多くて、フォーム全体が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 件のコメント:
コメントを投稿