他のページからスムーズスクロールする際にトップページのローディング画面を表示しないようにしたいです。

前提・実現したいこと

閲覧いただきありがとうございます！
以下の「スムーズスクロール用のjQuery」を使用して、別ページからトップページの特定の箇所（id="visit"）へスムーズスクロールできるようにしたのですが、その後、以下の「トップページ表示前のローディング画面用jQuery」を使用してトップページ表示前のローディング画面を作成したところ、別ページからスムーズスクロールしてきた際に、スクロール先のコンテンツが表示される前にそのローディング画面が表示されるようになってしまいました。

ローディング画面はトップページに訪問した時のみ表示して、別ページからトップページの「#visit」へスムーズスクロールしてもローディング画面が表示されないようにする方法はありますでしょうか？

ネットで色々調べたところ、
https://teratail.com/questions/308995
の質問と類似しているかと思ったのですが、お恥ずかしながらGitHubを利用したことがなく理解できないため質問させていただきたいです。
どうぞよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

使用ブラウザ：Chrome
使用エディタ：Visual Studio Code

該当のソースコード

HTML
1<!-- トップページのHTML -->
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="utf-8">
7  <title>トップページ</title>
8  <meta name="description" content="略">
9  <meta name="viewport" content="width=device-width, initial-scale=1">
10  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11  <link rel="stylesheet" href="style.css">
12</head>
13
14<body>
15  <header id="header">
16    <h1>h1</h1>
17  </header>
18  <main id="main">
19    <section id="mainvisual">メインビジュアル</section>
20    <article id="news" class="news">ニュース</article>
21    <article id="about" class="about">アバウト</article>
22    <article id="menu" class="menu">メニュー</article>
23    <article id="visit">
24      <div class="wrapper">
25        <div class="top-title-wrapper">
26          <h2>Visit</h2>
27        </div>
28        <div class="visit-text-wrapper">
29          <p class="address">住所</p>
30          <div class="visit-button">ボタン</div>
31          <p class="business-hour">営業時間</p>
32          <ul class="sns">
33            <li>Twitterアイコン</li>
34            <li>Instagramアイコン</li>
35            <li>Facebookアイコン</li>
36          </ul>
37        </div>
38        <div class="map">地図</div>
39      </div>
40    </article>
41    </section>
42  </main>
43  <footer>
44    <p class="copyright">&copy; 略</p>
45  </footer>
46
47  <!-- ローディング画面用コード -->
48  <div class="first-animation">
49    <div class="first-image"><img src="images/logo.jpg" alt="ロゴ"></div>
50  </div>
51
52  <!-- js -->
53  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
54  <script src="js/fadein.js"></script>
55  <script src="js/smooth.js"></script>
56</body>
57
58</html>

HTML
1<!-- 他のページのHTML -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title>アバウトページ</title>
7  <meta name="description" content="略">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10  <link rel="stylesheet" href="style.css">
11</head>
12<body>
13  <header id="header">
14    <h1>アバウト</h1>
15  </header>
16  <main id="main">
17    <section id="mainvisual">メインビジュアル</section>
18    <section id="about" class="about">
19      <a href="index.html#visit">Visitへのリンクボタン</a>
20    </section>
21  </main>
22  <footer>
23    <p class="copyright">&copy; 略</p>
24  </footer>
25  <!-- js -->
26  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
27  <script src="js/fadein.js"></script>
28  <script src="js/smooth.js"></script>
29</body>
30</html>

CSS
1@charset "UTF-8";
2/* ローディング画面用CSS */
3/* 最初のロゴの表示のスタイル */
4.first-animation {
5  background: white;
6  position: fixed;
7  top: 0;
8  left: 0;
9  height: 100%;
10  width: 100%;
11  z-index: 9000;
12}
13.first-image {
14  position: fixed;
15  left: 50%;
16  top: 50%;
17  transform: translate(-50%, -50%);
18  display: none;
19  z-index: 9999;
20  width: 23%;
21}
22/* その他CSS */
23html {
24  font-size: 100%;
25}
26body {
27  color: #333;
28  font-size: 14px;
29}
30li {
31  list-style: none;
32}
33img {
34  max-width: 100%;
35}
36a {
37  color: #333;
38  text-decoration: none;
39}
40h1 {
41  font-size: 50px;
42  padding: 50px;
43}
44#mainvisual {
45  color: rgb(241, 137, 198);
46  font-size: 50px;
47  text-align: center;
48}
49article {
50  height: 500px;
51}
52#news {
53  background-color: burlywood;
54}
55#about {
56  background-color: rgb(155, 241, 241);
57}
58#menu {
59  background-color: pink;
60}
61#visit {
62  background-color: darkcyan;
63}
64footer p {
65  font-size: 13px;
66  text-align: center;
67  height: 30px;
68}
69#about {
70  width: 300px;
71  height: 50px;
72  display: flex;
73  align-items: center;
74  justify-content: center;
75  font-size: 16px;
76  margin: 0 auto;
77}

jQuery
1//スムーズスクロール用のjQuery
2$(function () {
3   var urlHash = location.hash;
4   if (urlHash) {
5   $('body,html').stop().scrollTop(0);
6   setTimeout(function(){
7      var headerHight = 0;
8      var target = $(urlHash);
9      var position = target.offset().top - headerHight;
10      $('body,html').stop().animate({scrollTop:position}, 900);
11      }, 100);
12   }
13});

jQuery
1// トップページ表示前のローディング画面用jQuery
2$(function() {
3    setTimeout(function(){
4        $('.first-animation .first-image').fadeIn(1600);
5    },500);
6    setTimeout(function(){
7        $('.first-animation').fadeOut(1000);
8    },2500);
9});

行動規範の内容に同意します

回答1件

自己解決

改めてネットで色々調べましたが解決せず、同様にトップページにローディング画面を使用しているサイトを色々見ましたが、私が作っているような他のページからトップページの特定の箇所へスムーズスクロールさせているサイトは見つからず、いずれもページ内でスムーズスクロールさせていたり、トップページ以外のページへスムーズスクロールさせたりしていましたので、同様にトップページの「#visit」をvisit.htmlとして別ページを作ってそちらへスムーズスクロールさせることで解決しました。
ご参照いただきありがとうございました。

投稿2021/10/22 06:37

butanokakuni

総合スコア2