【Javascript】ページを開いた時の表示位置を設定 - エンジニ屋.com(エンジニヤドットコム)

ページを開いたときに、ページ内の任意の箇所を表示する方法です。

実際に開発でもありましたが、例えば、問い合わせフォームが、トップページの下部にあり、問い合わせをフォームを入力送信後、もし入力に誤りがある場合は、再度問い合わせの箇所を表示させたいことがありました。

そんなときに、ちょっとした応用で対応が可能です。

説明画像

表示位置のID属性を指定

Javascriptで下記コードを書きます。

<script>
    window.onload = function() {
            window.location.hash = "hogehoge"
        }
    };
</script>

2行目のwindow.onload でページを読み込んだ後に処理が通るようにします。

3行目のwindow.location.hash = "hogehoge"でurlの末尾に"#hogehog"と文字列を追記できます。

これを「フラグメント識別子」「アンカー」と呼びます。

これで、同じ値のID属性へ飛ぶことができます。

例えば、htmlのページのソースが下記のような内容だとしたら、ページを開いた瞬間に、ID="hogehoge"の位置まで飛び、そこから表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div>
　  <div>
          上部エリア
     </div>
.
.
.<省略>
.
.

</div>
<div Id="hogehoge">
     <div>
          下部エリア
     </div>
</div>
</body>
</html>

通常は上部が表示されるはずがID属性を付与することで、指定したID部分から表示されるようになります。

条件によって表示を変更させたい

冒頭でも書いたとおり、エラーで返されたときのみ、下部の位置へ飛ばしたいとします。

このような場合は、ちょっとした応用で簡単にできます。

先ほどのJavascriptのコードを下記のように追加します。

<script>
    window.onload = function() {
        if($("#contact").hasClass("required")) {//#contactとrequired は任意です。
            window.location.hash = "hogehoge"
        }
    };
</script>

if文の条件にhasClassを使用します。

これでid属性のcontact 内のclasssにrequired があるときは、location.hash を通すように処理すれば実装できます。

html側はどのようにすれば、良いかというと。

Laravelの場合の説明となりますが、errorが返った場合、$errors->has()でtrueを返すことが可能なので、下記の5行目のようにif文の中に記述すれば、errorの時はclass="required"が表示されるようになります。

表示された場合は、その場所まで飛ぶようになります。

<div class="mg-b_40">
       <label for="name" class="required-tag">担当者名</label><br>
       <input type="text" placeholder="山田太郎" id="name" name="name" value="{{ old('name') }}">
      @if($errors->has('name'))
       　<p class="required">{{ $errors->first('name') }}</p>
      @endif
 </div>