Q&A
サイト全体のソースは載せられますか？
縦長1ページのhtmlサイトを制作しています。
グローバルナビゲーションを上部に固定し、そこにロゴでホームページトップにリンクするようにしています。
ページをリロードする際、ブラウザの仕様（？）（chrome）で、ページの中腹にある問い合わせフォームに初期表示が出てきてしまうため、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <script type="text/javascript"> $(window).ready(function(){ $('html').animate({ scrollTop: 0 }, '1'); var headerHeight = $('.site-header').outerHeight(); var urlHash = location.hash; if(urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ var target = $(urlHash); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); });} }); </script>をhead内に記述しています。（初期表示位置から上に上がるアクションを見せないようにするため、第一に読み込まれるhead内に書きました）。
これにより、リロードをするだけであれば、ホームページトップで更新がなされている体になります。
しかし、冒頭のロゴのリンクをクリックすると、どうしても初期表示位置から上に上がるアクションが出てきてしまいます。
改善する方法があるのか、はたまた無いのかすら見当がつきません。
javascriptもコーディングも初心者のため、皆様の知恵をお借りしたいです。
宜しくお願い致します。
〈環境〉
mac os x elcapitan
dreamweaver cs6
-----追記-----
以下仮サーバーにあげているものになります。
http://tokyo-d-plex.com/~hisakiito/ninite/html/index.html
以下ソースの内容になります。（字数の関係でコンテンツの中身は省きます）
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>建築設計事務所 株式会社ninite</title> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<meta name="Keywords" content="担い手,にないて,ninite,新築設計,リノベーション設計,住宅設計,商空間設計,施工主の思いを叶える,有名,信頼できる,気軽に相談,建築設計事務所,東京,関東,青" /> 8<meta name="description" content="建築設計事務所 株式会社ninite" /> 9<link rel="stylesheet" href="css/reset.css"> 10<link rel="stylesheet" type="text/css" href="css/slick.css" media="screen" /> 11<link rel="stylesheet" type="text/css" href="css/slick-theme.css" media="screen" /> 12<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 13<script type="text/javascript"> 14$(window).ready(function(){ 15 $('html').animate({ scrollTop: 0 }, '1'); 16 var headerHeight = $('.site-header').outerHeight(); 17 var urlHash = location.hash; 18if(urlHash) { 19 $('body,html').stop().scrollTop(0); 20 setTimeout(function(){ 21 var target = $(urlHash); 22 var position = target.offset().top - headerHeight; 23 $('body,html').stop().animate({scrollTop:position}, 500); 24 });} 25 }); 26</script> 27<link rel="stylesheet" href="css/jquery.bxslider.css"> 28<link rel="stylesheet" href="css/style.css"> 29<link rel="icon" href="favicon.ico"> 30<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> 31</head> 32<body> 33 <div class="header_wrap"> 34 <header> 35 <div id="bland-rogo"> 36 <span class="rogomark"> 37 <a href="index.html"> 38 <img src="img/rogomark.svg"> 39 </a> 40 </span> 41 <span class="rogotype"> 42 <a href="index.html"> 43 <img src="img/rogotype.svg"> 44 </a> 45 </span> 46 </div> 47 </header> 48 <div id="nav-toggle"> 49 <div></div> 50 <div></div> 51 <div></div> 52 </div> 53 <div id="global-nav"> 54 <ul class="global-nav-ul"> 55 <li><a href="#ABOUTUS" class="global-nav-ABOUTUS"><span>私たちについて</span></a></li> 56 <li><a href="#WORKS" class="global-nav-WORKS"><span>施工事例</span></a></li> 57 <li><a href="#CONTACT" class="global-nav-CONTACT"><span>お問合わせ</span></a></li> 58 <li><a href="#COMPANY" class="global-nav-COMPANY"><span>会社概要</span></a></li> 59 <li><a href="https://www.facebook.com"><img src="img/fbrogo.svg" style="vertical-align:middle; margin-right:10px;"></a> 60 <a href="https://www.instagram.com"><img src="img/instarogo.svg" style="vertical-align:middle; margin-left:10px;"></a></li> 61 </ul> 62 </div> 63 </div> 64 <main> 65 <article id="top_main"> 66 <ul class="bxSlider1"> 67 <li></li> 68 </ul> 69 </article> 70 <div id="scroll"><img src="img/scroll.svg"></div> 71 <article id="ABOUTUS"> 72 <section id="ABOUTUS_text"> 73 </section> 74 <section id="ABOUTUS_back"> 75 <ul class="bxSlider2"> 76 <li style="background-image:url(img/slider2/1.jpg);"></li> 77 </ul> 78 </section> 79 </article> 80 <div id="totop" class="effect"><a href="index.html"><img src="img/totop.svg"></a></div> 81 <article id="WORKS"> 82 <section id="WORKS_text"></section> 83 <div id="WORKS_detail"> 84 <div id="WORKS_detail1"> 85 <div id="WORKS_detail_text" data-aos="fade-right"> 86 <div class="WORKS_detail_h1">Afford of Life</div> 87 <div class="WORKS_detail_h2">YOKOHAMA</div> 88 <div class="WORKS_detail_h3"><a href="works_detail/works_onishi.html"><img src="img/more.svg"></a></div> 89 </div> 90 <div class="nyon_l_work" data-aos="fade-up-right"><img src="img/nyon_l.svg"width="100%" ></div> 91 <div class="nyon_s_work" data-aos="fade-up-left"><a href="works_detail/works_onishi.html"><img src="img/nyun_s.svg"></a></div> 92 </div> 93 <section id="WORKS_MORE"> 94 <a href="works.html"><img src="img/workdmore.svg"></a> 95 </section> 96 </div> 97 </article> 98 <article id="CONTACT"> 99 <section id="CONTACT_text"> 100 <h1><img src="img/CONTACT_h1.svg"></h1> 101 <h2>お問合わせ</h2> 102 <P>皆様のご要望に添えるよう、まずは気軽に相談頂き、 ご希望であればご提案をさせて頂き、検討して頂ければと思います。<br> 103詳しい内容は、下記お問合わせフォームにてご連絡ください。<br> 104内容を確認後、返信いたします。 105 </P> 106 <div class="contact_detail_1"> 107 <form action="confirm.php" method="post" id="contact"> 108 <table> 109 <tbody> 110 </tbody> 111</table> 112 </form> 113 </div> 114 <div class="contact_detail_2"> 115 <form action="confirm.php" method="post" id="contact"> 116 <table> 117 <tbody> 118 </tbody> 119</table> 120 </form> 121 </div> 122 </section> 123 </article> 124 <div id="RECRUIT"></div> 125 <div id="RECRUIT_1280px"></div> 126 <article id="COMPANY"> 127 <div id="COMPANY_wrap"> 128 <div class="COMPANY_detail"> 129 <div class="COMPANY_MAP"> 130 </div> 131 <div class="COMPANY_MAP2"> 132 </div> 133 <div class="COMPANY_detail_text"> 134 <table class="COMPANY_data"> 135 <tr> 136 <td><img src="img/company_pin.svg"></td> 137 <td>〒102-0074<br> 138 東京都千代田区九段南1-5-6<br> 139 りそな九段ビル5F<br></td> 140 </tr> 141 </table> 142 </div> 143 </div> 144 </div> 145 </article> 146 <footer> 147 Copyright©ninite Ltd. All Rights Reserved. 148 </footer> 149 </main> 150 <div id="overlay"></div> 151<script src="js/slick.js"></script> 152<script> 153$('.bxSlider2').slick({ 154 arrows: false, 155 autoplay: true, 156 /* ポイントここから～ */ 157 autoplaySpeed: 0, 158 cssEase: 'linear', 159 speed: 15000, 160 /* ～ここまで */ 161 slidesToShow: 3.2, 162 slidesToScroll: 1, 163 accessibility: false, 164 infinite: true, 165}); 166</script> 167<script type="text/javascript"> 168(function($) { 169 $(function () { 170 $('.sub-menu').on({ 171 'mouseenter': function () { 172 $(this).addClass('is-active'); 173 }, 174 'mouseleave': function () { 175 $(this).removeClass('is-active'); 176 } 177 }); 178 $('#nav-toggle,#overlay').on('click', function() { 179 $('body').toggleClass('open'); 180 }); 181 }); 182})(jQuery); 183</script> 184 <script src="js/jquery.validate.js"></script> 185 <script src="js/messages_ja.js"></script> 186 <script type="text/javascript"> 187$(document).ready(function() { 188 $("#contact").validate(); 189}); 190</script> 191 <script src="js/ajaxzip3.js"></script> 192<script src="js/jquery.bxslider.js"></script> 193<script> 194$(document).ready(function(){ 195 $('.bxSlider1').bxSlider({ 196 responsive: 'true', 197 auto:'true', 198 slidewidth:'100%', 199 minSlides:'1', 200 maxSlides: '5', 201 mode:'fade', 202 pager:false, 203 controls: false, 204 pause: 6000 205 }); 206}); 207</script> 208<script> 209$(function() { 210 var topBtn = $('.effect'); 211 topBtn.hide(); 212 //スクロールが100に達したらボタン表示 213 $(window).scroll(function () { 214 if ($(this).scrollTop() > 100) { 215 //ボタンの表示方法 216 topBtn.fadeIn(); 217 } else { 218 //ボタンの非表示方法 219 topBtn.fadeOut(); 220 } 221 }); 222 //スクロールしてトップ 223 topBtn.click(function () { 224 $('body, html').animate({ 225 scrollTop: 0 226 }, 500); 227 return false; 228 }); 229}); 230</script> 231<!-- JS読み込み --> 232 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 233 <!-- 初期化する --> 234 <script> 235 AOS.init({ 236<!-- offset: 20,--> 237 delay: 0, 238 duration: 1200, 239 easing: 'ease', 240 once: false, 241 mirror: false, 242 anchorPlacement: 'top-bottom', 243}); 244 </script> 245<script type="text/javascript"> 246$(function(){ 247 $('a[href^=#]').click(function(){ 248 var speed = 800; 249 var href= $(this).attr("href"); 250 var target = $(href == "#" || href == "" ? 'html' : href); 251 var position = target.offset().top - 120; 252 $("html, body").animate({scrollTop:position}, speed, "swing"); 253 return false; 254 }); 255}); 256</script> 257</body> 258</html>
yoshi0819様 追記にて挙げましたので、ご確認いただけるとありがたいです。
一度ブラウザを再起動してハッシュ値なしでアクセスしてみてください
それでも改善しない場合キャッシュの削除を試してみてください。
yoshi0819様 ハッシュ値を除いたら解決いたしました！凄いです！本当にありがとうございます！
回答1件
0
自己解決
yoshi0819様のご助言にて、ハッシュ値を取り除いたら望み通りの動きとなりました。
本当にありがとうございます！
投稿2018/11/23 05:03
総合スコア16
あなたの回答
tips
プレビュー
