*

javascript(jQuery):指定位置までスクロールする方法

公開日: : 最終更新日:2014/08/21 javascript


jQueryを使用して指定位置までスクロールする方法です。htmlのid指定でリンクをすると瞬時にページが切り替わってしまいますが、この方法を使うとリンクをクリックした際に指定位置まで滑らかに移動することができます。

 

実装方法

var h = $("html,body");
h.animate({scrollTop : "指定位置"}, {queue : false});

例:

h.animate({scrollTop : 200}, {queue : false});
//ページ上部から200pxの位置に移動します。

応用

offset()を使うとjQueryオブジェクトの位置を取得できますので、入力フォームでエラーが発生した位置まで移動することもできます。

var isErr = false;
var targetoffset = null;
$.each($("form input, form select, form textarea"), function() {

 //エラーチェックを記述
 if (エラー判定式) {
  isErr = true;
 }

 //エラーが起きたフォームの位置を取得
 if (isErr && targetoffset == null) {
  targetoffset = $(this).offset();
 }
});

//エラーがあった場合
if (isErr) {
 var h = $("html,body");
 //現在の表示位置よりも上部にある場合にその位置まで移動
 if (h.scrollTop() > targetoffset.top - 30) {
  h.animate({scrollTop : targetoffset.top - 30}, {queue : false});
 }
}

以上です。

結構簡単にできるので色々なところに使えそうですね。

ad_right_top

関連記事

blog_logo_small

javascript:配列の要素を連結して文字列として出力

phpで配列の要素を連結して出力する方法を掲載したので、ついでにjavascriptでの方法も掲載し

記事を読む

blog_logo_small

javascript(jQuery):変数の型を確認する方法

前回、javascriptで変数(オブジェクト)の型を判定する方法を掲載しましたが、今回はjQuer

記事を読む

blog_logo_small

javascript(jQuery):ページ離脱時にアラートを出す方法

申し込みフォームなどの情報を入力する画面で、途中まで入力したけどうっかり戻ったら入力内容がなくなって

記事を読む

blog_logo_small

javascript:変数(オブジェクト)の型を確認する方法

プログラムを書いていると変数の型によって処理を分岐させるなど、変数の型を取得したい場合がでてきます。

記事を読む

blog_logo_small

javascript(jQuery):submit時に処理を実施

jQueryを使用してsubmit時に処理を行う方法です。入力内容のチェック処理などは、サーバー側で

記事を読む

blog_logo_small

javascript(jQuery):scrollTopを使用する際の注意点

scrollTopを使用するとブラウザのスクロール上部の位置を取得できますが、ブラウザによって少し挙

記事を読む

google以外広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad_right_top

linux-pen
【cron】秒間隔で定期実行する為の設定方法

コマンドを定期実行させたい場合に利用するcronですが、普通に利用する

blog_logo_small
【Apache】 ReverseProxy(リバースプロキシ)を設定してサブディレクトで別サーバーの内容を表示

今回はApacheのリバースプロキシ設定について紹介したいと思います。

blog_logo_small
【Apache】 Aliasを設定してサブディレクトでDocumentRoot以外を参照する

今回はApacheのAlias設定について紹介したいと思います。この方

no image
2015:新年のご挨拶

明けましておめでとうございます。 昨年はたくさんの方々に当ブログ

blog_logo_small
MySQL:外部ホストからのDBアクセス方法

MySQLではデフォルトで外部ホストからのアクセスを許可していないので

→もっと見る

  • アクセスカウンター
PAGE TOP ↑