発生している問題・エラーメッセージ
WordPressでサイトを構築中で、TOPページのみページ上のTOPへ戻るためのscrollTopが効きません。(その他の複数の固定ページ上では動いています。)
CSSでhtmlやbodyにheight: 100vh;を指定するとよい、などの情報を見つけて試してみましたが、うまくいきませんでした。。
他の競合しているかもしれないJSファイルの読み込みをすべて停止してもだめでした。
デベロッパーツールでもエラーは出ていませんでした。
何か考えられるヒントだけでもいただけると嬉しいです。m(__)m
該当のソースコード
html
1<section class="page-top-scroll"> 2 <div class="pt-arrowWrap" id="pagetop"> 3 <div class="pt-arrowInner"> 4 <div class="pt-arrow"></div> 5 <p>PAGE TOP</p> 6 </div> 7 </div> 8</section> 9
css
1.page-top-scroll { 2 position: absolute; 3 right: 0; 4 bottom: 0; 5 z-index: 999; 6} 7 8.pt-arrowWrap { 9 position: absolute; 10 right: 0; 11 bottom: 30px; 12 width: 50px; 13 height: 150px; 14 z-index: 9; 15 cursor: pointer; 16} 17 18.pt-arrowInner p { 19 margin-top: 22px; 20 padding-bottom: 4px; 21 font-size: 16px; 22 letter-spacing: 0.1em; 23 text-align: home; 24 -webkit-transform: rotate(90deg); 25 transform: rotate(90deg); 26 white-space: nowrap; 27 color: #161542; 28} 29 30.pt-arrow { 31 width: 1px; 32 height: 60px; 33 margin: 0 auto; 34 background-color: #eee; 35 position: relative; 36} 37 38.pt-arrow::before { 39 content: ''; 40 width: 1px; 41 margin: 0 auto; 42 background-color: #000; 43 position: absolute; 44 bottom: 0; 45 left: 0; 46 -webkit-animation: arrow-up 2.5s ease 0s infinite normal; 47 animation: arrow-up 2.5s ease 0s infinite normal; 48} 49@-webkit-keyframes arrow-up { 50 0% { 51 height: 0; 52 } 53 54 60% { 55 height: 60px; 56 } 57 58 100% { 59 height: 60px; 60 } 61}
JavaScript
1jQuery.noConflict(); 2 (function($) { 3 $(function() { 4 $('#pagetop').click(function() { 5 $("html, body").animate({ scrollTop: 0 }, "slow"); 6 return false; 7 }); 8 }); 9 })(jQuery)
以上、PC・スマホの各種ブラウザでまったく動きませんので、環境のせいではなさそうです。
詳しい方、どうぞよろしくお願いいたします。m(__)m
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/28 01:35