Q&A
"下層ページで"ということはファイルパスの問題な気がしますので、それを読み込んでいる部分のHTMLを記載願います。
前提・実現したいこと
初めての質問で、説明がわかりづらい様でしたらすみません・・・
HTML,CSS,JavaScriptでページをスクロールするとトップへ戻るボタンが表示される様にしたいのですが
トップページでは表示されるのですが、下層ページでいっさい表示されない。
下層ページはトップページよりも長さはあります。
発生している問題・エラーメッセージ
トップページではボタンが表示されるが、下層ページで表示されない。
該当のソースコード
HTML
1<div class="section s_01"> 2 <div class="fuwafuwa"><a href="#" class="back-to-top"><img src="image/5_off.png" alt="" class="img-fluid"></a></div> 3</div>
CSS
1.fuwafuwa { 2 animation: fuwafuwa 3s infinite ease-in-out .8s alternate; 3 background: no-repeat center center / 60px auto; 4 display: inline-block; 5 position : fixed; 6 transition: 1.5s ease-in-out; 7 width: 10vw; 8 left: 85vw; 9} 10@keyframes fuwafuwa { 11 0% { 12 transform:translate(0, 0) rotate(-7deg); 13 } 14 50% { 15 transform:translate(0, -7px) rotate(0deg); 16 } 17 100% { 18 transform:translate(0, 0) rotate(7deg); 19 } 20} 21/* マウスを乗せた時に透明度を変える */ 22.back-to-top:hover { 23 opacity: 1; 24} 25/*ボードロゴ*/ 26.anime_6 { 27 width: 15vw; 28 left: 50vw; 29}
JavaScript
1const updateButton = () => { 2 if ($(window).scrollTop() >= 100) { 3 // 50px以上スクロールされた 4 // ボタンを表示 5 $('.back-to-top').fadeIn(); 6 } else { 7 // ボタンを非表示 8 $('.back-to-top').fadeOut(); 9 } 10}; 11// スクロールされる度にupdateButtonを実行 12$(window).on('scroll', updateButton); 13// ボタンをクリックしたらページトップにスクロールする 14$('.back-to-top').on('click', (e) => { 15 // ボタンのhrefに遷移しない 16 e.preventDefault(); 17 // 600ミリ秒かけてトップに戻る 18 $('html, body').animate({ scrollTop: 0 }, 600); 19}); 20// ページの途中でリロード（再読み込み）された場合でも、ボタンが表示されるようにする 21updateButton();
試したこと
ネット検索で同じような案件の回答で試してみましたが解決に至りませんでした・・・。
補足情報（FW/ツールのバージョンなど）
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, shrink-to-fit=no"> 6<meta name="keywords" content=""> 7<meta name="description" content=""> 8<meta property="og:site_name" content=""> 9<meta property="og:type" content="website"> 10<meta property="og:url" content=""> 11<meta property="og:title" content=""> 12<meta property="og:description" content=""> 13<!-- Bootstrap CSS --> 14<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 15<link rel="stylesheet" href="main.css" media="all"> 16<title>パートナー/partner</title> 17</head> 18<body> 19<!--ここからloading */--> 20<div id="loader-bg"> 21 <div id="loader"> 22 <img src="image/dolphin6.gif" alt="loading..."> 23 </div> 24</div> 25<!--loadingここまで*/--> 26<div id="background"> 27 <!--ここからヘッダー--> 28 <header> 29 <h1><a href="index.html"><img class="d-block mx-auto" src="image/title.png" alt="cocoharete" width="35%"></a></h1> 30 <!-- ↓ハンバーガーメニューここから↓ --> 31 <div class="hamburger-demo-menubox"> 32 <input id="hamburger-demo5" type="checkbox" class="input-hidden"> 33 <label for="hamburger-demo5" class="hamburger-demo-switch hamburger-demo-switch5"> 34 <span class="hamburger-switch-binder"></span> 35 </label> 36 <div class="hamburger-demo-menuwrap hamburger-menuwrap-left hamburger-menuwrap-binder"> 37 <ul class="hamburger-demo-menulist hamburger-menulist-binder"> 38 39 <li><a href="index.html"><i class="far fa-hand-point-up"></i> TOP</a></li> 40 <li><a href="service.html"><i class="fas fa-concierge-bell"></i> サービス</a></li> 41 <li><a href="breakroom/index.html"><i class="fas fa-cocktail"></i> ブレイクルーム</a></li> 42 <li><a href="partner.html"><i class="far fa-handshake"></i> パートナー</a></li> 43 <li><a href="summary.html"><i class="fas fa-paw"></i> 事業紹介</a></li> 44 <li><a href="contact/contact.php"><i class="far fa-paper-plane"></i> お問い合わせ</a></li> 45 <li><a href="sdgs.html"><i class="fas fa-globe-asia"></i> SDGs</a></li> 46 <li><a href="privacy.html"><i class="fas fa-user-secret"></i> Privacy policy</a></li> 47 </ul> 48 </div> 49 <div class="hamburger-demo-closelabel"> 50 <label for="hamburger-demo5" class="hamburger-demo-cover"></label> 51 </div> 52 </div> 53 <!-- ↑ハンバーガーメニューここまで↑ --> 54 </header> 55 <!--ヘッダーここまで--> 56 57<!--ここからメイン--> 58<div id="main"> 59 <span class="partnerimage"> 60 <img src="image/partner.png" alt="" class="img-fluid"> 61 </span> 62 <div id="display_position"> 63 <section class="box_area"> 64 <div class="balloon1"> 65 <h6 class="privacy_lead"></h6> 66 </div> 67 <span class="doggif"> 68 <img src="image/doggif.gif" alt=""> 69 </span> 70 71 </section> 72 </div> 73 <div id="display_position_2"> 74 <section class="box_area"> 75 <a href="" target="_blank" rel="noopener noreferrer"><h2 class="privacy_title"></h2></a> 76 <p class="privacy_lead">では今まで培ってきた提案力と行動力で 77 ビジネスを加速させてお客様のビジネスをトータルでサポートいたします。<br> 78 IT導入補助金事業者登録済（2021年）のためIT導入補助金はもちろん、その他補助金のサポートも承っております。 79 </p> 80 <a href="" target="_blank" rel="noopener noreferrer" class="btn btn_menu_7_p"> 81 <img src="image/7_p_off.png" alt="BUTTON" class="img-fluid"></a> 82 </section> 83 </div> 84 <div id="display_position_3"> 85 <section class="box_area"> 86 <a href="hiro.html" target="_blank" rel="noopener noreferrer"><h2 class="privacy_title"></h2></a> 87 <p class="privacy_lead">では主にコンサルティング業務を行っており、自社物件の賃貸も行っております。</p> 88 <a href="hiro.html" target="_blank" rel="noopener noreferrer" class="btn btn_menu_8_p"> 89 <img src="image/8_p_off.png" alt="BUTTON" class="img-fluid"></a> 90 </section> 91 </div> 92 <div class="section s_01"> 93 <div class="fuwafuwa"><a href="#" class="back-to-top"><img src="image/5_off.png" alt="" class="img-fluid"></a></div> 94 </div> 95</div> 96<!--メインここまで--> 97</div> 98 99<!--ここからフッター--> 100<footer> 101 <p><small>© All rights Reserved.</small></p> 102</footer> 103<!--フッターここまで--> 104<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 105<script src="main.js"></script> 106<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> 107<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 108</body> 109</html>
回答3件
0
ベストアンサー
codepenでhtml,css,scriptをそれぞれ入力してテストすると、ちゃんとふわふわしたボタンがスクロールで表示され、クリックするとページトップへ戻ります。
ということでスクリプトもHTMLも内容自体は間違っていません。
おそらく問題なのは、最下段のscriptタグです。
html
1<script src="main.js"></script>
多分ドキュメントルートにmain.jsが配置されており、下層（サブディレクトリ以下にあるhtmlファイル）から相対パスでmain.jsが取得できてないと思われます。
このスクリプトもmain.jsに書かれていると考えられます。jsファイルが読めていないからスクリプトも動いていません。
また、
html
1 <div class="fuwafuwa"><a href="#" class="back-to-top"><img src="image/5_off.png" alt="" class="img-fluid"></a></div>
これは当該のTOPへ戻るボタンのタグですが、scriptタグと同様にimgのsrcも相対パスが誤っているため画像が読み込まれていないのではないでしょうか。
双方とも検証ツールのNetworkタブを見れば正常に読み込まれているか分かります。
相対パスで記載しているスクリプト、画像等を全体的に見直してみてください。
投稿2021/06/18 16:08
総合スコア4447
0
position: fixed;を削除するとフッターの下の方にボタンが出現したので
HTMLの記述で<div id="main">の下へ移動させたら表示されるようになりました。
ただページによってはコンテンツの下に隠れてしまう箇所があり、新たな課題が出てきました・・・(_ _).｡o○
投稿2021/06/20 04:05
総合スコア1
0
/* width: 10vw; */ left: 85vw; top:90vh;
CSSのここがおかしいように思われます。
投稿2021/06/09 19:39
総合スコア608
あなたの回答
tips
プレビュー
