回答編集履歴

2022/02/05 06:14

投稿

スコア501

test CHANGED Viewed

@@ -1,241 +1,117 @@
 ### 色々と対応ありがとうございました。
 ### デバッグが完了しました。クロームの開発者ツールでは問題ないことを確認しています。
 実機でのテストではさすがにそちら様のサーバー上のコードを勝手に書き換えるわけにもいかないので**実機での確認はお任せします。**
-まずheadタグ内の以下のコードは削除してください。
+**まず、headタグ内のスクリプトは削除してください。**
+---
+### 変更点のみコードを抜粋して掲載します。
 ```html
- <script>
-    var scroll = new SmoothScroll('a[href*="#"]');
- </script>
-```
-### 変更点のみコードを抜粋して掲載します。
-```html
     <nav id="nav-main" class="">
         <div class="background">
     <ul>
         <li>menu</li>
         <li>staff</li>
         <li>blog</li>
         <li>access</li>
         <li>reserve</li>
         <li>recrute</li>
         <li>info</li>
     </ul>
             </div>
     </nav>
     <div id="back-drop"></div><!--ユーザビリティを上げるためバックドロップを追加-->
      <script> //新規追加
      // ページ内リンクのみ取得
       var scroll = new SmoothScroll('a[href*="#"]', {
        speed: 300,//スクロールする速さ
        header: '#page-header'//固定ヘッダーがある場合
       });
      </script>
     <script>
       $(document).ready(function(){
         $('.mainvisual-container').bxSlider({
             mode: 'fade',
             speed: 3900,
             auto: true,
             pager: false,
             controls: false
+        });
+      });
+    </script>
+    <script>
+        $('#btn-menu').on('click',function(){
+            $('#btn-menu, #nav-main' ).toggleClass('show');
+            $('#back-drop').toggleClass('show');
         });
+        $('#back-drop').on('click',function(){ //ユーザビリティを上げるためバックドロップを追加
+            $('#btn-menu, #nav-main' ).toggleClass('show');
+            $('#back-drop').toggleClass('show');
-      });
+        });
     </script>
-    <script>
-        $('#btn-menu').on('click',function(){
-            $('#btn-menu, #nav-main' ).toggleClass('show');
-            $('#back-drop').toggleClass('show');
-        });
-        $('#back-drop').on('click',function(){ //ユーザビリティを上げるためバックドロップを追加
-            $('#btn-menu, #nav-main' ).toggleClass('show');
-            $('#back-drop').toggleClass('show');
-        });
-    </script>
 ```
 ```css
 #page-header { /*headerのcssを修正*/
     height: 40px;
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 150;
 }
 #back-drop { /*ユーザビリティを上げるためバックドロップを追加*/
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     z-index: 100;
     background-color: #000;
     opacity: 0;
     visibility: hidden;
     transition: all .6s;
     cursor: pointer;
 }
 #back-drop.show {
     opacity: .5;
     visibility: visible;
 }
 #nav-main.show { /*バックドロップに対応させてCSSを修正*/
     display: block;
     position: fixed;
     left: 0;
     padding: 0;
     z-index: 150;
     width: 120px;
     background: white;
 }
 #mv-container { /*新規追加*/
     margin-top: 40px;
 }
 ```
 あと、デバッグしてて気づいたのですが、
 ```
 sp.cssのimgタグの右マージンのプロパティ名が間違ってます
 正しくは
 margin-right
 です
 ```
 参考リンク：[https://www.omakase.net/blog/2020/10/smooth-scrolljs.html](https://www.omakase.net/blog/2020/10/smooth-scrolljs.html)
 コードブロックの右上のボタンでコード全体をコピーできますので、ご自分の環境に張り付けてテストしてみてください。
 また、何かそちら様では対応不可能な不具合などありましたら、こちらの回答の方にコメントをつけてください。
 出来る限り対応します。

コードの修正　説明の修正

2021/12/26 17:51

投稿

nekora

スコア501

test CHANGED Viewed

@@ -10,6 +10,18 @@
+まずheadタグ内の以下のコードは削除してください。
+```html
+ <script>
+    var scroll = new SmoothScroll('a[href*="#"]');
+ </script>
+```
 ### 変更点のみコードを抜粋して掲載します。
 ```html

説明を修整

2021/12/26 17:51

投稿

nekora

スコア501

test CHANGED Viewed

@@ -216,6 +216,10 @@
+参考リンク：[https://www.omakase.net/blog/2020/10/smooth-scrolljs.html](https://www.omakase.net/blog/2020/10/smooth-scrolljs.html)
 コードブロックの右上のボタンでコード全体をコピーできますので、ご自分の環境に張り付けてテストしてみてください。