質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2709閲覧

アンカーリンクをクリックするとローディング画面が閉じない

doyadoya213

総合スコア23

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/07/23 11:52

編集2019/07/23 13:07

Rubyで作ったサイトで、以下のようなコードでローディング画面を実装しています。

ロードしたときや画面遷移したときには、ローディング画面が表示されて読み込みが終わるとページが表示されるようになっています。

しかし、アンカーリンク(<a href="#"></a>)をクリックした時はページ自体がロードされないためにローディング画面が閉じなくて困っています。

いろんな方法を考えましたが、うまくいかなかったので質問させていただきました。

何卒よろしくお願いしますm(__)m

HTML

1 <!-- ページの一番上に移動するためのアンカーリンク --> 2 <p id="scroll-up" style="display: block; opacity: 1;"> 3 <a href="#"></a> 4 </p> 5    <!-- ローディング画面 --> 6 <div id="preloader"> 7 <div class="spinner"></div> 8 </div>

CSS

1#preloader { 2 background: #14355d; 3 position: fixed; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 left: 0; 8 z-index: 99998; 9 display: block; 10} 11 12.spinner { 13 width: 60px; 14 height: 60px; 15 margin: auto; 16 position: absolute; 17 top: 0; 18 left: 0; 19 bottom: 0; 20 right: 0; 21 -webkit-border-radius: 100%; 22 -moz-border-radius: 100%; 23 border-radius: 100%; 24 text-indent: -9999px; 25 border-top: 2px solid #df1843; 26 border-right: 2px solid #8a9297; 27 border-bottom: 2px solid #8a9297; 28 border-left: 2px solid #8a9297; 29 -webkit-transform: translateZ(0); 30 -moz-transform: translateZ(0); 31 -o-transform: translateZ(0); 32 -ms-transform: translateZ(0); 33 transform: translateZ(0); 34 -webkit-animation: spin .5s linear infinite; 35 -moz-animation: spin .5s linear infinite; 36 -ms-zoom-animation: spin .5s linear infinite; 37 -o-animation: spin .5s linear infinite; 38 animation: spin .5s linear infinite; 39} 40 41@keyframes spin { 42 0% { 43 transform: rotate(0); 44 } 45 46 100% { 47 transform: rotate(360deg); 48 }

JavaScript

1 $(function() { 2 $(window).on('pageshow', function() { 3 $('#preloader').fadeOut(500); 4 }); 5 6 $('a').click(function() { 7 var url = $(this).attr('href'); 8 if (this.href.match(location.hostname) && $(this).attr('href').charAt(0) != "#" && !$(this).attr('rel') && !$(this).attr('target')) { 9 var linkURL = $(this).attr('href'); 10 $('#preloader').fadeIn(500, function() { 11 location.href = linkURL; 12 }); 13 return false; 14 } 15 }); 16 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/07/24 01:52

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

アンカーリンククリック時に同じfadeOutを流せば良いだけでは?

投稿2019/07/23 12:17

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

doyadoya213

2019/07/23 12:56

以下のようにやったのですが、ローディング画面は表示されたままです。どこかおかしい箇所はありますでしょうか? $('#scroll-up').click(function() { $('#preloader').fadeOut(500); });
m.ts10806

2019/07/23 13:00

今初めて出てきたscroll-upってどこの何という要素なのでしょうか。 質問本文にHTMLを追記してください。
doyadoya213

2019/07/23 13:09

失礼しました。 ページ上まで移動するためのアンカーリンクのことです。一応、ローディング画面のCSSも追記しました。
doyadoya213

2019/07/24 00:06 編集

自己解決しました。 デフォルトでローディング画面が表示されるようになっていましたが、 ======================================== <div id="preloader"> <div class="spinner"></div> </div> ======================================== style="display:none;"で非表示にすることで、アンカーリンククリック時にローディング画面が表示できないようにしました。 ======================================== <div id="preloader" style="display: none;"> <div class="spinner"></div> </div> ======================================== ありがとうございました。
m.ts10806

2019/07/24 00:16

解決されたようで何よりです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問