質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

5132閲覧

スムーススクロールとハンバーガーメニュー内リンクをクリックで閉じる

kasidai

総合スコア5

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/11/28 03:40

編集2019/11/29 02:09

前提・実現したいこと

ハンバーガーメニューを設置しており、一部ページ内リンクとスムーススクロールを設定しています。
ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。

しかしスクロールされず、ハンバーガーメニューも閉じずに開いたままです。

該当のソースコード

html

1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン 2 3<div class="hamburger"> 4 <div class="Toggle"> 5 <span></span> 6 <span></span> 7 <span></span> 8 </div> 9 </div> 10 </div> 11 12 <nav class="NavMenu"> 13 <ul class="hummanu"> 14 <li><a href="#work">Works</a></li> 15 <li><a href="#about">About</a></li> 16 <li><a href="#contact">Contact</a></li> 17 </ul> 18 </nav> 19 20<div class="work">//各スクロールしたい階層 21<div class="about"> 22<div class="contact"> 23 24

CSS

1.Toggle { 2 /* display: inline-block; */ 3 position: relative; 4 /* right: 13px; */ 5 /* top: 12px; */ 6 width: 40px; 7 height: 40px; 8 cursor: pointer; 9 z-index: 3; 10 /* text-align: right; */ 11} 12 13.Toggle span { 14 display: block; 15 position: absolute; 16 width: 30px; 17 border-bottom: solid 5px #ff8c00; 18 -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/ 19 -moz-transition: .35s ease-in-out; /*変化の速度を指定*/ 20 transition: .35s ease-in-out; /*変化の速度を指定*/ 21 left: 6px; 22} 23 24.Toggle span:nth-child(1) { 25 top: 9px; 26} 27 28.Toggle span:nth-child(2) { 29 top: 18px; 30} 31 32.Toggle span:nth-child(3) { 33 top: 27px; 34} 35 36 37.Toggle.active span:nth-child(1) { 38 top: 18px; 39 left: 6px; 40 -webkit-transform: rotate(-45deg); 41 -moz-transform: rotate(-45deg); 42 transform: rotate(-45deg); 43} 44 45 46.Toggle.active span:nth-child(2), 47.Toggle.active span:nth-child(3) { 48 top: 18px; 49 -webkit-transform: rotate(45deg); 50 -moz-transform: rotate(45deg); 51 transform: rotate(45deg); 52} 53//scroll.css 54 55 56nav.NavMenu { 57 position: fixed; /*表示位置を固定*/ 58 z-index: 2; /*重ね順を変更*/ 59 top: 0; /*表示位置を指定*/ 60 left: 0; /*表示位置を指定*/ 61 background: transparent; /*背景を透明にする*/ 62 color: #000; /*文字色を白にする*/ 63 text-align: center; /*テキストを中央揃え*/ 64 width: 100%; /*全幅表示*/ 65 transform: translateY(-100%); /*ナビを上に隠す*/ 66 transition: all 0.6s; /*アニメーションの時間を指定*/ 67 68 69} 70 71.open.NavMenu { 72 top: 60px; 73 74} 75 76nav.NavMenu ul { 77 background: #ccc; /*背景をグレーにする*/ 78 width: 100%; 79 margin: 0 auto; 80 padding: 0; 81 height: 100vh; 82 display: flex; 83 flex-direction: column; 84 background-color: rgba(0, 0, 0, 0.9); 85 86} 87 88nav.NavMenu ul li { 89 font-size: 1.1em; 90 list-style-type: none; 91 padding: 0; 92 width: 100%; 93 94} 95 96nav.NavMenu ul li:last-child { 97 padding-bottom: 0; 98 border-bottom: none; /*最後のメニュー項目のみ下線を消す*/ 99} 100 101nav.NavMenu ul li a { 102 display: block; /*クリックできる領域を広げる*/ 103 color: #ffffff; 104 padding: 1em 0; 105 text-decoration: none; 106} 107 108nav.NavMenu.active { 109 transform: translateY(0%); 110} 111//Hamburger.css

javascript

1//hambuger.js 2 3$(function () { 4 $('.Toggle').click(function () { 5 $('header').toggleClass('open'); 6 $(this).toggleClass('active'); 7 if ($(this).hasClass('active')) { 8 $('.NavMenu').addClass('active');  //クラスを付与 9 } else { 10 $('.NavMenu').removeClass('active'); //クラスを外す 11 } 12 }); 13}); 14 15

javascript

1 2//scroll.js 3 4$(function () { 5 $('a[href^=#]').click(function() { 6 var speed = 400; 7 var href= $(this).attr("href"); 8 var target = $(href == "#" || href == "" ? 'html' : href); 9 var position = target.offset().top; 10 $('body,html').animate({scrollTop:position}, speed, 'swing'); 11 $('.NavMenu').removeClass('open'); 12 $('.NavMenu').removeClass('active'); 13 $(".Toggle").removeClass('active'); 14 return false; 15 }); 16});

ここにより詳細な情報を記載してください。
色んな記事を見て試しましたが、全く動かず消えずでした。
JS初心者のため,すみませんがよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iss

2019/11/28 04:34 編集

開始DIVに抜けがあるようなので補完してください。
kasidai

2019/11/28 04:39

修正しました!ありがとうございます。
iss

2019/11/28 04:45

jQueryのバージョンによって書き方がかわるので バージョンを補足記載いただけますか?
iss

2019/11/28 04:59

1.3.2ですね了解です。本文にも記載すると他の方も参考になるので正確な回答がつきやすくなると思います。
guest

回答1

0

ベストアンサー

追記修正版

< 小出しされた情報で無効になった修正もあり見辛くなっていたので整理して書き直しました。 >

アンカーの問題

アンカーリンクはclassではなくIDで指定する必要があります。

HTML

1<div id="work">各スクロールしたい階層</div> 2<div id="about">各スクロールしたい階層</div> 3<div id="contact">各スクロールしたい階層</div>

ハンバーガーメニューが閉じれない問題

閉じる時のクリック判定が、開く時の判定の中にあるため動作していません。

$('#nav a').on('click', function() {
~~ $('#nav').toggleClass('active');~~
~~ $(".Toggle").toggleClass('active');~~
})

の部分は全部カットして、Classの付加処理は
$('a[href^=#]').click(function() { の中に移動しましょう。

また、メニュークリックでは必ずハンバーガーが閉じるのでtoggleClassではなくremoveClassにしたほうが後々の処理干渉がなくなるのでおすすめ。

あとCSSから察するに、open の class は header ではなくnav.NavMenu に付く事で動作しているようなので、
$('header').removeClass('open'); の指定箇所は
$('.NavMenu').removeClass('open'); にしました。

JavaScript

1 $('a[href^=#]').click(function() { 2 var speed = 400; 3 var href= $(this).attr("href"); 4 var target = $(href == "#" || href == "" ? 'html' : href); 5 var position = target.offset().top; 6 $('body,html').animate({scrollTop:position}, speed, 'swing'); 7 $('.NavMenu').removeClass('open'); 8 $('.NavMenu').removeClass('active'); 9 $(".Toggle").removeClass('active'); 10 return false; 11 });

検証したコード

参考に検証したコードをはっておきます。

HTML

1<!DOCTYPE html> 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 10 <style> 11 </style> 12</head> 13<body> 14 15<div class="hamburger"> 16 <div class="Toggle"> 17 <span></span> 18 <span></span> 19 <span></span> 20 </div> 21</div> 22<nav class="NavMenu"> 23 <ul class="hummanu"> 24 <li><a href="#work">Works</a></li> 25 <li><a href="#about">About</a></li> 26 <li><a href="#contact">Contact</a></li> 27 </ul> 28</nav> 29 30<div id="work" style="margin:50px 0 100vh 0;">#work 各スクロールしたい階層</div> 31<div id="about" style="margin-bottom:100vh;">#about 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div> 32<div id="contact" style="margin-bottom:100vh;">#contact 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div> 33 34</body> 35</html>

JavaScript

1$(function () { 2 $('.Toggle').click(function () { 3 $('.NavMenu').toggleClass('open'); 4 $(this).toggleClass('active'); 5 if ($(this).hasClass('active')) { 6 $('.NavMenu').addClass('active');  //クラスを付与 7 } else { 8 $('.NavMenu').removeClass('active'); //クラスを外す 9 } 10 }); 11 $('a[href^=#]').click(function() { 12 var speed = 400; 13 var href= $(this).attr("href"); 14 var target = $(href == "#" || href == "" ? 'html' : href); 15 var position = target.offset().top; 16 $('body,html').animate({scrollTop:position}, speed, 'swing'); 17 $('.NavMenu').removeClass('open'); 18 $('.NavMenu').removeClass('active'); 19 $(".Toggle").removeClass('active'); 20 return false; 21 }); 22});

CodePen 検証

https://codepen.io/isscode/pen/pooMBJL

投稿2019/11/28 04:35

編集2019/11/29 01:33
iss

総合スコア506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kasidai

2019/11/28 04:40

修正しました!そこはただこのページで追加しただけなので実際のコードには書かれておりません。ご指摘ありがとうございます。
iss

2019/11/28 04:41

修正対応ありがとうございます。他の原因を検証してみます
kasidai

2019/11/28 06:50

スクロールの方はIDの件で動作するようになりました! ハンバーガーのリンクを押したとき閉じる動作はscroll処理の方に3通り追記してみましたが、まだ変わらないようです(追記した箇所が良くないのかもしれません)。ハンバーガーのCSSを追記してみたので確認お願いします。
iss

2019/11/28 06:55

CSS追記確認しました。 表示非表示に作用している[.active]や [.open]のスタイルも欲しいです。
iss

2019/11/28 07:04 編集

見逃してましたが、 $('#nav a').on('click', function() { $('#nav').toggleClass('active'); が間違ってそうです。[#]ではなく $('nav') または $('nav.NavMenu') または $('.NavMenu') ではないでしょうか。 ▼セレクタの付け方例: <header>は$('header') <header id="hoge">は$('#hoge') または $('header#hoge') <header class="hoge">は$('.hoge') または $('header.hoge')
iss

2019/11/28 07:14

すいません、小出しで修正をしていたら本質を見失っていました。 追記でちゃんと回答します。
kasidai

2019/11/28 22:36

返信遅れてすみません! 今のところまだ動作しないようです。 表示非表示に作用している[.active]や [.open]のスタイル(//Hamburger)を追加しました。 よろしくお願いします!
iss

2019/11/29 01:22

CSS追記ありがとうございます。ようやく全容が見えました。 スタイル指定に合わせて細かなコードを調整しました。 CodePen上では動作しているのでコードを見比べてみてください。 https://codepen.io/isscode/pen/pooMBJL
kasidai

2019/11/29 02:17 編集

Codepenの動きが理想の動きです!しかしHamburgerとscrollのJsをまとめて書くとCodepenのようにメニューを押したとき上に背景の黒い部分に隙間ができてしまいますが、Jsファイルを分割してあると直るようです。 また、自分のエディタで動かしたところメニューボタンをクリックしたところ、開かなくなりました。 $('.NavMenu').toggleClass('open');のところを ('header').toggleClass('open');に戻すと開くようにはなるようです。 また、Jsのファイルは実際分けてあるので該当のソースコードもJsファイルを分割しました。 何度も修正すみません。
iss

2019/11/29 02:29

提示されたコードに<header> や header.open のスタイルが無く、 .open.NavMenu のみが提示されたので $('header')が間違いだろうと$('.NavMenu')に変更したのです。 ここまで解説した内容やサンプルコードを理解していれば自身で治せると思うのですが無理そうですか?
kasidai

2019/11/29 09:59 編集

色々と自分なりに試してみましたがどうも閉じる動きだけできませんね... もう少し考えてみます。 ありがとうございました!
kasidai

2019/12/02 07:10

$('a[href^=#]')と言われていたところを、$('a[href^="#"]')にしたところ無事動作しました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問