エンジニ屋.com(エンジニヤドットコム)

日々得たWebエンジニアに関する情報をアウトプットしてます!

【Javascript】ページを開いた時の表示位置を設定

ページを開いたときに、ページ内の任意の箇所を表示する方法です。
実際に開発でもありましたが、例えば、問い合わせフォームが、トップページの下部にあり、問い合わせをフォームを入力送信後、もし入力に誤りがある場合は、再度問い合わせの箇所を表示させたいことがありました。そんなときに、ちょっとした応用で対応が可能です。

説明画像

表示位置の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>

Laravelのbladeを使用した説明をしましたが、他の言語でも同じように、エラーの時にclassを表示させるようにソースを記述すれば、対応可能です。

以上となります。 Have a nice development day~~~!