モーダルをクリックすると、トップにスクロールを解消する方法!

モーダルをクリックすると、なぜか自動でトップ画面に戻る・・・。

最下層にいるのに、クリックすると背景がトップにスクロールしてしまう。

 

この状況を抜け出すために、いろいろと試してみまた。

その結果、超簡単なことで解決できたでメモ代わりに残しておきます。

 

 

モーダルをクリックすると、トップにスクロールを解消する方法!

モーダルをクリックをするとトップにスクロールする・・。

これを解決するには、「a」タグを「span」タグにするだけ!

え?それだけ?

 

と、思いますが、本当にこれだけで解決しました。

どうしても「a」タグじゃないとだめ!っていうこだわりがないのであれば、「a」タグを「span」タグにしてみてください。

 

コードはこんな感じです。

 

クリックする部分はもともと「a」タグだったのを「span」に変更。

<a href=”#” class=”theme” id=”login-show”>Contact</a>
       ↓
<span href=”#” class=”theme” id=”login-show”>Contact</span>

 

モーダル部分はこんな感じ♪

<div class=”login-modal-wrapper” id=”login-modal”>
 <div class=”modal”>
<divid=”contact-form”>
<h2>Contact</h2>
<formaction=”#”>
<inputclass=”form-control”type=”text”placeholder=”メールアドレス”>
<inputclass=”form-control”type=”password”placeholder=”パスワード”>
<divid=”submit-btn”>Send</div>
</form>
</div>
</div>
</div>
クリックしたらモーダルが出てくる部分を「a」にすることで解決しました♪