Q&A
<html lang="ja"></html> すごく冒頭でHTML締めちゃってますけどここ関係ないですよねたぶん。
ワンページサイトを製作しています。
ナビメニューをJQプラグインの<drawer>で実装したのですが、メニューリストをクリックしてもページ内遷移しません。
厳密には、少しだけ移動します。どのメニューをクリックしても、<smint>を実装しているナビバーのところで止まります。
(<smint>はスクロールするとナビが上部で固定されるようになっています。)
それ以外は動作問題ありません。
<smint>との相性の問題なのか、そもそも間違えているのか。
コードはどこまで載せればいいのかわからなかったため、htmlのみ記載させていただきます。
間違いポイントをご指摘いただけると有り難いです。
smint
（ワンページサイトナビ、pc用に）
drawer
（ハンバーグガーメニュー、mb用に）
を実装しています。
html
1<!DOCTYPE html> 2<html lang="ja"></html> 3<head> 4 <meta charset="UTF-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>タイトル＊＊</title> 8 <link href="css/main.css" rel="stylesheet" type="text/css"/> 9 <link href="libs/smint/css/demo.css" rel="stylesheet" type="text/css"/> 10 <script type="text/javascript" src="libs/smint/js/jquery.min.js"></script> 11 <script type="text/javascript" src="libs/smint/js/jquery.smint.js"></script> 12 <script> 13 $(document).ready( function() { 14 $('.subMenu').smint({ 15 'scrollSpeed' : 300 16 }); 17 }); 18 </script> 19 <script src="libs/iscroll-master/build/iscroll.js"></script> 20 <link rel="stylesheet" href="libs/drawer-master/dist/css/drawer.css"/> 21 <script src="libs/drawer-master/dist/js/drawer.min.js"></script> 22 <script> 23 $(document).ready(function() { 24 $(".drawer").drawer(); 25 }); 26 27 28 </script> 29</head> 30<body class="drawer drawer--right"> 31 <header role="banner"> 32 <button class="drawer-toggle drawer-hamburger" type="button"><span class="sr-only">toggle navigation</span><span class="drawer-hamburger-icon"></span></button> 33 <nav class="drawer-nav" role="navigation"> 34 <ul class="drawer-menu"> 35 <li><a class="drawer-brand" href="#sTop">Home</a></li> 36 <li><a class="drawer-menu-item" href="#s1">訪問</a></li> 37 <li><a class="drawer-menu-item" href="#s2">治療費</a></li> 38 <li><a class="drawer-menu-item" href="#s3">利用の流れ</a></li> 39 <li><a class="drawer-menu-item" href="#s4">対応エリア</a></li> 40 <li><a class="drawer-menu-item" href="#s5">会社案内</a></li> 41 <li><a class="drawer-menu-item" href="#s6">無料体験</a></li> 42 </ul> 43 </nav> 44 </header> 45 <main role="main">//drawer 46 <div class="wrap"> 47 <div class="section sTop"> 48 <div class="inner"> 49 <h1 class="title">SMINT Demo Page</h1> 50 <h2 class="subtitle">Feel free to use this as your starting template</h2> 51 52 </div> 53 </div> 54 <div class="subMenu"> 55 <div class="inner"><a class="subNavBtn" href="#sTop">Home</a><a class="subNavBtn" href="#s1">訪問</a><a class="subNavBtn" href="#s2">治療費</a><a class="subNavBtn" href="#s3">利用の流れ</a><a class="subNavBtn" href="#s4">対応エリア</a><a class="subNavBtn" href="#s5">会社案内</a><a class="subNavBtn end" href="#s6">無料体験</a></div> 56 </div> 57 <div class="section s0"> 58 <div class="inner"> 59 <h1>ヘッダー</h1> 60 <p>テキストなどのコンテンツ</p><img src="img/index.jpg" alt=""/> 61 </div> 62 </div> 63 <div class="section s1" id="s1"> 64 <div class="inner"> 65 <h1>コンテンツ1</h1> 66 <p>テキストなどのコンテンツ</p><img src="img/about.jpg" alt=""/> 67 </div> 68 </div> 69 <div class="section s2" id="s2"> 70 <div class="inner"> 71 <h1>コンテンツ2</h1> 72 <p>テキストなどのコンテンツ</p><img src="img/cost.jpg" alt=""/> 73 </div> 74 </div> 75 <div class="section s3" id="s3"> 76 <div class="inner"> 77 <h1>コンテンツ3</h1> 78 <p>テキストなどのコンテンツ</p><img src="img/sistem.jpg" alt=""/> 79 </div> 80 </div> 81 <div class="section s4" id="s4"> 82 <div class="inner"> 83 <h1>コンテンツ4</h1> 84 <p>テキストなどのコンテンツ</p><img src="img/area.jpg" alt=""/> 85 </div> 86 </div> 87 <div class="section s5" id="s5"> 88 <div class="inner"> 89 <h1>コンテンツ5</h1> 90 <p>テキストなどのコンテンツ</p><img src="img/company.jpg" alt=""/> 91 </div> 92 </div> 93 <div class="section s6" id="s6"> 94 <div class="inner"> 95 <h1>コンテンツ6</h1> 96 <p>テキストなどのコンテンツ</p><img src="img/freetry.jpg" alt=""/> 97 </div> 98 </div> 99 </div> 100 </main> 101</body>
mitsu1006様よりのご指摘により修正しました。
jquery
1$(document).ready( function() { 2 $('.subMenu').smint({ 3 'scrollSpeed' : 300 4 }); 5 $('.drawer-menu').smint({ 6 'scrollSpeed' : 300 7 }); 8 });
＜↑no.1＞上記にしたところ、スクロールするようになりました！が、100vhより下にあるコンテンツへの遷移になると右にあったドロワーメニューの中身が左に移動してしまった。(メニューの中身、ul.drawer-menuだけ左に、nav.drawer-navは右端のまま。)
jquery
1$(document).ready( function() { 2 $('.subMenu').smint({ 3 'scrollSpeed' : 300 4 }); 5 }); 6 7 $(document).ready( function() { 8 $('.drawer-menu').smint({ 9 'scrollSpeed' : 300 10 }); 11 });
＜↑no.2＞そこで上記に変更しました。
コード変更後に試したところ、ul.drawer-menuの5.6番目のliのコンテンツに遷移した時、＜no.1＞と同じようなバグになりました。が、何度か再読み込みをかけると全てのメニューに問題なく遷移しました。
consoleには
jquery.smint.js:98 Uncaught TypeError: Cannot read
とエラーが出ています。
テストしていたら、他のバグが出ていました。
ドロワーメニューが閉じている状態の時に、普通にスクロールダウンしていった際、残り5%くらいのところでドロワーメニューが左端に表示されてしまいます。
回答1件
0
drawerメニューにもsubMenuと同じようにsmintの設定してみてください。
おそらくこれで遷移はできるのではと思います。他にも調整は必要そうですが。。
JavaScript
1$('.drawer-menu').smint({ 2 'scrollSpeed' : 300 3});
投稿2017/06/09 01:42
総合スコア80888
matsu1006様、ご回答ありがとう御座います！！
ご指摘のように修正しましたところ、遷移できました。
すんなりできて本当に助かりました。
追記したように、最初にバグが出るのと、consoleにエラーがでているので調整は必要そうです。
再度失礼します。
テストしていたら、他のバグが出ていました。
ドロワーメニューが閉じている状態の時に、普通にスクロールダウンしていった際、残り5%くらいのところでドロワーメニューが左端に表示されてしまうのです。
そういえば
$(document).ready( function() { を何度も書くのは無駄になるので中身をひとつにまとめてください。可読性にもかかってきます。
その5％の件は別問題になりそうですね。
一度当該質問を締めて、別途質問をたてられて、あとスクリーンショットもあったらつけてください。
ご確認ありがとう御座います。
うっかり見逃していたのでしたが、他にもバグありました。＜↑no.2＞の時、固定してるはずの.subMenuが固定されずスクロールされていました。
ご指摘いただいた、「〜を何度も書くのは無駄になる〜」箇所を修正します。
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 300
});
$('.drawer-menu').smint({
'scrollSpeed' : 300
});
});
上記修正したところ上で、別途質問を立てます。(バグも変わりました。)
ちなみに、テストサーバーにあげて見ていただくというのは有りなのでしょうか？こちらの規定を網羅していないのですが。
>テストサーバーにあげて見ていただくというのは有りなのでしょうか？
んー。私自身も詳しいわけではないのですが、実際に動いているURLを提示されている方もいますし、ソースコードと画面キャプチャだけでは分からないことも多いので、広告・宣伝的な要素が含まれないであれば問題ないのではないでしょうか？（ただし誰でも見れる状態になるので悪意のあるユーザーの攻撃などは考慮すべきですが）
あなたの回答
tips
プレビュー
