TopJavaScriptjQuery > 2012年2月
2012年2月 5日

リロードしたときにjQueryでページの先頭にスクロールさせる方法

February 5,2012 3:33 AM
Tag:[]
Permalink

ページをリロードしたときに、jQueryでページの先頭にスクロールさせる方法を紹介します。

リンクをクリックしてページの先頭にスクロールさせる方法はネット色々出てきますが、リロードのタイミングでスクロール(=要はページの先頭を表示)させる手段がみつかりませんでした。

別の実験を行っていてこのような動作を行いたいケースが発生したため、少し調べてみました。認識誤りな点がありましたらご指摘ください。

1.JavaScriptのscrollTo()を使ったスクロール

まず、JavaScriptのscrollTo()を使って次のようなコードを記述してみましたが、正常に動作しませんでした。

window.onload = function(){
    window.scrollTo(0,0);
}

動作結果は次の通りです。

  • Firefox:ページトップに移動するが、スクロールバーは戻らない
  • Chrome:ページトップに移動しない(挙動としては一旦トップに戻って、またもとの位置にスクロールされる)
  • IE9:ページトップに移動しない(〃)

2.jQueryのscrollTop()を使ったスクロール

次に、jQueryのscrollTop()を使って次のようなコードを記述してみましたが、こちらも正常に動作しませんでした。

$(function() {
    var pos = $('html,body').scrollTop();
    $('html,body').scrollTop(-pos);
});
  • Firefox:ページトップに移動するが、スクロールバーは戻らない
  • Chrome:ページトップに移動しない(少し戻るがトップまで戻らない」)
  • IE9:ページトップに移動しない

3.jQueryのanimate()を使ったスクロール

最後にjQueryのanimate()で次のようなコードを書いてみたところ、とりあえずどのブラウザでもトップに戻ることができました。

$(function() {
    $('html,body').animate({ scrollTop: 0 }, '1');
});

animateの第2パラメータ(duration)を「'1'」としている理由は、「0」では動作しない(jQueryの仕様?)ということと、クォーテーションで括らないとIE9で正常に動作しないためです。また、firefoxはスクロール動作が遅いようです。

以上です。スクロールにこだわった実験ですが、観点がそもそも間違っていて「こうすればリロード前のスクロール状態がクリアできる」という方法があるかもしれません。あしからず。

Comments [0] | Trackbacks [1]
2012年2月 2日

フォームに設置した複数のsubmitボタン(送信ボタン)をjQueryで制御する

February 2,2012 1:55 AM
Tag:[, ]
Permalink

1つのフォームに複数設置したsubmitボタン(送信ボタン)の挙動をjQueryで操作・変更する方法を紹介します。

1.用途

このエントリーでは次の2つのケースを紹介します。

  • 1つのフォームに同じ動作を行う送信ボタンを複数設置する
  • 1つのフォームに異なる動作を行う送信ボタンを設置する

2.1つのフォームに同じ動作を行う送信ボタンを複数設置する

たとえばページに表示されたフォームなどの上下に送信ボタンがあった方が、スクロール量が減るなどの利便性が高い場合があります。これをHTMLだけで実現するには、form要素(赤色)内にtype属性値「submit」のinput要素(青色)を設置すれば可能です。

<form name="foo" method="post" action="foo.cgi">
  <input type="submit" value="送信" />
  …中略…
  <input type="submit" value="送信" />
</form>
サンプル1

ただし、HTMLだけで実現する場合、form要素内にinput要素を記述しないといけないという制約があるようです。次のマークアップでは送信ボタンをクリックしても動作しません。

<input type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input type="button" value="送信" />

かといってform要素の開始タグと終了タグの記述位置を、送信ボタンを表示したい位置に移動するのもどうかと思われます。

ということで、input要素とjQueryと組み合わせれば送信ボタンを好きな位置に設置する例を示します。ちなみに、input要素は「XHTMLタグ一覧表示ツール」をご覧になればお分かりの通り、div要素やp要素、span要素などの子要素であれば、form要素だけでなく、任意の位置に記述することができます。

具体的には、次のようなjQueryを実装します。HTMLマークアップは動作に必要な要素以外は省略しているのでツッコミなしで。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('input[type=button]').click(function() {
        $('#foo').submit();
    });
});
</script>
 
<input type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input type="button" value="送信" />
サンプル2

送信ボタン用のinput要素はform要素の外側にあります。送信ボタンをクリックすれば、jQueryのclickイベントでform要素を検索し、submitイベントを実行します。

あるいは、送信ボタンによって動作を変更したい場合があると思います。

2.1つのフォームに異なる動作を行う送信ボタンを設置する

1項で設置したボタンに対し、それぞれ異なる動作を行わせる方法を紹介します。

まず、フォームから起動するCGI(action属性)などを変更するには、次のようにします。input要素にid属性値(赤色)を追加し、それぞれにclickイベントを実装します。clickイベントの中では、form要素のaction属性値を書き換えてからsubmitイベントを実行するようにします。どちらか一方が書き換え不要な場合はform要素のaction属性をそのまま利用しても構いません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#button1').click(function() {
        $('#foo').attr('action', 'bar.cgi');
        $('#foo').submit();
    });
    $('#button2').click(function() {
        $('#foo').attr('action', 'hoge.cgi');
        $('#foo').submit();
    });
});
</script>
 
<input id="button1" type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input id="button2" type="button" value="送信" />
サンプル3

次に、同じCGIを起動し、クリックされた送信ボタンによってPOSTデータを変更したい場合は、次のようにします。type属性「hidden」のinput要素(赤色)を追加し、clickイベントの中でform要素のinput要素の値を設定してからsubmitイベントを実行します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#button1').click(function() {
        $('input[type=hidden]').val('bar');
        $('#foo').submit();
    });
    $('#button2').click(function() {
        $('input[type=hidden]').val('hoge');
        $('#foo').submit();
    });
});
</script>
 
<input id="button1" type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  <input type="hidden" name="data1" value="" />
  …中略…
</form>
<input id="button2"  type="button" value="送信" />
サンプル4

CGIでは(上の例では)POSTデータの「data1」から値を取得できます。さらに異なるCGIを起動したい場合は、上記の2つのサンプルを組み合わせてください。

以上です。他にも実現方法はあると思いますので色々試してみてください。

2013.05.21
リンク切れを修正しました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3