PHPフォーム送信しても、現在の表示位置をキープできるようするテクニック

2020年2月4日2022年1月6日

　ホームページでリンクジャンプすると、表示位置はページの先頭位置になります。それは当然のことです。途中から表示されても見づらいものです。

しかしながら、PHPプログラムだとそれが仇になることがあります。
管理画面等での記事の上下入れ替えや、ボタン選択処理などです。
表示位置がボタンを押すごとに表示位置が先頭に戻ると、思いのほか使い勝手が悪くなります。

PHPでボタンクリック時に、表示位置をキープする方法がないかとググって調べて試してみたところ、うまくできましたので忘備録として記録いたします。

今回の内容

1. 現象はこのような感じです。
2. まずは、表示位置をキープできるように対応したプログラムをご覧ください。
3. 疑問？表示位置は具体的にどうやってキープしているの？
- 3.1. Jquery $(window).scrollTop() 関数で表示位置をキープ
- 3.2. PHP側で現在のスクロール位置を、指定スクロール位置として表示する
4. 具体的なコーディング方法
5. PHPとJqueryの連携はやればできる。

現象はこのような感じです。

まずは以下のプログラムを見てください。
ボタンを押すと表示位置が先頭に戻る例

スクロールして、下のほうを見るとボタンがあります。
このボタンをクリックすると、ページが再表示されるのですが、その際に表示位置が先頭に戻ります。

これを、ボタンを押しても表示位置をそのままキープできるようにします。

まずは、表示位置をキープできるように対応したプログラムをご覧ください。

ボタンを押しても表示位置がキープできるようにしたプログラムをご覧ください。

ボタンを押しても表示位置をキープするプログラム

ボタンを押しても表示位置がキープされます。
やればできるものです。
ところで、ここで疑問がわいてきませんか?
一体どうやってPHPから表示位置をキープしているのだろうと？

疑問？表示位置は具体的にどうやってキープしているの？

一番関心のある部分ではないでしょうか？
サーバーサイドから、ブラウザサイドへ命令を出すことはできません。
表示に関してはブラウザに一任されており、表示位置のキープはブラウザ側でなければできません。

ではどうやってPHPから表示位置をキープさせているのか?
その原理を解説いたします。

Jquery $(window).scrollTop() 関数で表示位置をキープ

実際にキープしている方法は、Javascript（Jquery）を使用しています。
Jqueryに【$(window).scrollTop() 】という関数があり、この関数には2つの特性があります。

現在のスクロール位置を返す
指定スクロール位置へスクロールする

PHP側で現在のスクロール位置を、指定スクロール位置として表示する

ボタンを押したときに、１．の機能で現在のスクロール位置を取得し、PHPへデータとして送信します。

PHP側で受信した現在のスクロール位置を、指定スクロール位置として表示します。

この2つの工程だけで、表示位置がキープできるようになります。
とは言っても、「言うは易し」です。
具体的にどのように行っているのか、プログラムソースを踏まえて解説いたします。

具体的なコーディング方法

以下に表示位置をキープするサンプルプログラムソースを記載いたします。

<?php
// （５）▼▼▼
$position = 0;
// （５）▲▲▲
$msg = null;

// （６）▼▼▼
if ((isset($_REQUEST["position"]) == true)	// ボタンが押された？
 && (isset($_REQUEST["reset"]) != true))	// リセットボタンでない？
{
// （６）▲▲▲

// （７）▼▼▼
	$position = $_REQUEST["position"];
// （７）▲▲▲

	$msg = "【ボタンが押されましたが、表示位置がキープされました。】";
}

// 日付情報をセット
$today = date("Y/m/d h:i:s");
$time = "<p class=\"time\">■ただ今の時間<br>[${today}]</p>";
?>
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>位置テスト</title>
<style type="text/css">
article 
{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
	text-align: center;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 600px;
	padding-left: 30px;
}
p
{
	text-align: justify;
}

input[type=submit],
input[type=button]
{
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 29px;
}

.center
{
	text-align: center;
	margin-bottom: 300px;
}

.time
{
	text-align: right;
}

.msg
{
	color: #F00;
	text-align: center;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
// （２）▼▼▼ 
	window.onload = function (){	$(window).scrollTop(<?php echo $position; ?>);}
// （２）▲▲▲

// （３）▼▼▼
	$("input[type=button]").click(function()
	{
// （３）▲▲▲

// （４）▼▼▼
	 	var position = $(window).scrollTop();
		$("input:hidden[name=position]").val(position);
// （４）▲▲▲

		$("#form").submit();
	});
});
</script>
</head>
<body>
<article>
<section>
<p class="time"><?php echo $time; ?></p>

<h1>フォームボタンクリックで表示位置のキープに対応</h1>
<p>
下のフォームボタンを押して、プログラムに送信すると表示位置がキープした状態で再表示されます。
</p>

<p>
試しに、画面のかなり下にあるボタンを押してみてください。<br>
表示位置がボタンの位置のままキープされます。
</p>

<p class="center">↓ボタンはもう少し下にあります。↓</p>
<p class="center">↓ボタンはもう少し下にあります。↓</p>
<p class="center">↓ボタンはもう少し下にあります。↓</p>

</section>
<section>
<form id="form" action="" method="post" enctype="application/x-www-form-urlencoded">
<!-- （１）▼▼▼ -->
<input name="position" type="hidden" value="0">
<!-- （１）▲▲▲ -->
<input name="send" type="button" value="押すと表示位置がキープされます">
<input name="reset" type="submit" value="リセット">

</form>
<p class="msg"><?php echo $msg; ?></p>
</section>
</article>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<?php

// （５）▼▼▼

$position = 0;

// （５）▲▲▲

$msg = null;

// （６）▼▼▼

if ((isset($_REQUEST["position"]) == true) // ボタンが押された？

&& (isset($_REQUEST["reset"]) != true)) // リセットボタンでない？

{

// （６）▲▲▲

// （７）▼▼▼

$position = $_REQUEST["position"];

// （７）▲▲▲

$msg = "【ボタンが押されましたが、表示位置がキープされました。】";

}

// 日付情報をセット

$today = date("Y/m/d h:i:s");

$time = "<p class=\"time\">■ただ今の時間<br>[${today}]</p>";

<!doctype html>

<html>

<head>

<title>位置テスト</title>

article

{

width: 800px;

margin-right: auto;

margin-left: auto;

border: 1px solid #CCC;

text-align: center;

border-radius: 6px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

padding-top: 30px;

padding-right: 30px;

padding-bottom: 600px;

padding-left: 30px;

}

{

text-align: justify;

}

input[type=submit],

input[type=button]

{

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 29px;

}

.center

{

text-align: center;

margin-bottom: 300px;

}

.time

{

text-align: right;

}

.msg

{

color: #F00;

text-align: center;

}

</style>

$(document).ready(function()

{

// （２）▼▼▼

window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}

// （２）▲▲▲

// （３）▼▼▼

$("input[type=button]").click(function()

{

// （３）▲▲▲

// （４）▼▼▼

var position = $(window).scrollTop();

$("input:hidden[name=position]").val(position);

// （４）▲▲▲

$("#form").submit();

});

</script>

</head>

<body>

<h1>フォームボタンクリックで表示位置のキープに対応</h1>

<p>

下のフォームボタンを押して、プログラムに送信すると表示位置がキープした状態で再表示されます。

</p>

<p>

試しに、画面のかなり下にあるボタンを押してみてください。<br>

表示位置がボタンの位置のままキープされます。

</p>

<p class="center">↓ボタンはもう少し下にあります。↓</p>

</section>

</form>

</section>

</article>

</body>

</html>

プログラムは全体から眺めるより、部分的に見たほうがわかりやすいものです。
以下にパーツごとに記載いたします。

（１）表示位置をPHP側に送信するための仕掛けを入れる

<!-- （１）▼▼▼ -->
<input name="position" type="hidden" value="0">
<!-- （１）▲▲▲ -->

フォームの中に、非表示項目として現在の表示位置を設定します。
初期値は０でOKです。
なぜ０でよいかというと、ボタンを押したときにJqueryを使用してあとから設定するためです。

（２）ブラウザで表示時に指定位置へ自動スクロールする

// （２）▼▼▼ 
	window.onload = function (){	$(window).scrollTop(<?php echo $position; ?>);}
// （２）▲▲▲

// （２）▼▼▼

window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}

// （２）▲▲▲

ページ表示時に、指定スクロール位置に合わせます。
この時指定スクロール位置はPHPから渡されます。

この部分に、ボタンを押した時点のスクロール位置をセットすることで、表示位置のキープを実現しています。

ここが今回の処理の一番肝になる部分です。
ここが理解できれば後は簡単です。

（３）ボタンが押されたかを判断します。

// （３）▼▼▼
	$("input[type=button]").click(function()
	{
// （３）▲▲▲

// （３）▼▼▼

$("input[type=button]").click(function()

{

// （３）▲▲▲

いきなりサブミットすると、現在のスクロール位置をキープできないため、Jquery側でサブミットするようにします。

（４）現在のスクロール位置を（１）の非表示フォームにセットします。

// （４）▼▼▼
	 	var position = $(window).scrollTop();
		$("input:hidden[name=position]").val(position);
// （４）▲▲▲

// （４）▼▼▼

var position = $(window).scrollTop();

$("input:hidden[name=position]").val(position);

// （４）▲▲▲

（１）で非表示フォームにスクロール位置を０を設定していましたが、ボタンを押した際に、現在のスクロール位置を非表示項目にセットしています。

Jqeryで動的に設定した値も、キチンとPHPに送信されます。

（５）PHP側でスクロール位置の初期化を行う。

// （５）▼▼▼
$position = 0;
// （５）▲▲▲

// （５）▼▼▼

$position = 0;

// （５）▲▲▲

（１）に表示するスクロール位置を０で初期化します。
これは、ボタンを押されなかった時の初期表示位置を先頭位置にするためです。
例えば、ここに100を設定すると、初期表示位置が100ピクセル位置になります。

（６）ボタンが押されたかどうかの判断

// （６）▼▼▼
if ((isset($_REQUEST["position"]) == true)	// ボタンが押された？
 && (isset($_REQUEST["reset"]) != true))	// リセットボタンでない？
{
// （６）▲▲▲

// （６）▼▼▼

if ((isset($_REQUEST["position"]) == true) // ボタンが押された？

&& (isset($_REQUEST["reset"]) != true)) // リセットボタンでない？

{

// （６）▲▲▲

ボタンが押されると、$_REQUEST変数にフォームからのname=positionが設置されます。

その特性を利用し、position値がセットされていたらボタンが押されたと判断しています。

同様に”reset”を判断しているのは、リセットボタンが押されたときは何もしないためです。

（７）渡されたスクロール位置を（２）の位置へ表示

// （７）▼▼▼
	$position = $_REQUEST["position"];
// （７）▲▲▲

// （７）▼▼▼

$position = $_REQUEST["position"];

// （７）▲▲▲

フォームから送信されたスクロール位置情報を、（２）の初期スクロール位置へ設定します。

これにより、スクロール位置のキープを実現しています。

PHPとJqueryの連携はやればできる。

PHPはサーバー側で動作するプログラムです。
Jqueryはブラウザ側で動作するプログラムです。

一見接点が全くないプログラム同士ですが、やり方次第では互いに連携することができます。

実際に今回の例も、スクロール位置はブラウザ側のJqueryで求め、再表示時のスクロール位置はサーバー側のPHPで表示しています。

その分処理は複雑化してゆきますが、工夫することでプログラム制作の幅が広がります。

忘備録, PHP, Jqueryスクロール位置キープ, Jquery, PHP

Posted by OBATA

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30