質問編集履歴

2 headerのtextーprimary を’text-info’に変更しました。 babi-0105 score 5 2019/12/03 17:58 投稿

jQuely:ハンバーガーメニューのスクロールイベントが動かない

### 前提・実現したいこと

jQuely:ハンバーガーメニューのスクロールイベントを行いたいのですが、動いてくれません。

（実現したい事）

・メニューアイコンの中の’about'（後ほどコードにて紹介）などをクリックした際に、指定した場所まで自動スクロールで移動させたい

### 発生している問題・エラーメッセージ

以前、同じようにスクロールイベントを行った際は動いたのですが、、

その時と同様のコードを使っているのですが、今回は動きません。

### 該当のソースコード

```HTML

<head>

<title>Shoya Baba.PortFolio</title>

</head>

<body>

<div class="navbar-brand header-logo">Portfolio</div>

</button>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink1">About</a></li>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink2">Skills</a></li>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink3">Production</a></li>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink5">Contact</a></li>

</ul>

</div>

</nav>

</div>

</header>

<h2 class="text-center border-bottom border-info page-header mb-5 display-4 family pb-3">About</h2>

</div>

<h2 class="text-center mb-4">ああああああああああああ</h2>

<p class="about-text text-size">良い良い良い良いいいいいい（2019/3）っっっっっっっっっっっっっs<br>

っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっx

</div>

</body>

```

```CSS

header{

z-index:10;

background-color: rgba(0,0,0,0.8);

font-family: 'Homemade Apple', cursive;

}

```

```Javascript

$(function(){

var headerHight = 56;

//①ページ内スクロール

$(".navlink1").click(function () {

var i = $(".navlink1").index(this)

var p = $(".about").eq(i).offset().top-headerHight;

$('html,body').animate({ scrollTop: p }, 'fast');

return false;

});

```

### 試した事

①alert('OK');

→アラート命令より前のスクリプトにミスはない事の確認

②jQuely読み込みの、scriptタグを<head>タグの中へ

③<a>ではなく以前の、<li>タグのクラスを’navlink1’に。

### 補足情報（FW/ツールのバージョンなど）

・今回初めて、bootstrapを使用しました。

→✅bootstrapが何か関係しているのではないかと考えています。

jQuelyの使用に何か影響を与えてしまうのでしょうか？

・navタグのtextの色の変更も行う事ができません。

✅これも何か関係あるのでしょうか？

お忙しいとは思いますが、回答お待ちしております。

JavaScript

25037 questions

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

jQuery

9778 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スクロール

76 questions

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

Bootstrap

1661 questions

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1 文字の間違いを修正 babi-0105 score 5 2019/12/03 16:36 投稿

jQuely:ハンバーガーメニューのスクロールイベントが動かない

### 前提・実現したいこと

jQuely:ハンバーガーメニューのスクロールイベントを行いたいのですが、動いてくれません。

（実現したい事）

### 発生している問題・エラーメッセージ

以前、同じようにスクロールイベントを行った際は動いたのですが、、

その時と同様のコードを使っているのですが、今回は動きません。

### 該当のソースコード

```HTML

<head>

<title>Shoya Baba.PortFolio</title>

</head>

<body>

<div class="navbar-brand header-logo">Portfolio</div>

</button>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink1">About</a></li>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink2">Skills</a></li>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink3">Production</a></li>

<li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink5">Contact</a></li>

</ul>

</div>

</nav>

</div>

</header>

<h2 class="text-center border-bottom border-info page-header mb-5 display-4 family pb-3">About</h2>

</div>

<h2 class="text-center mb-4">ああああああああああああ</h2>

<p class="about-text text-size">良い良い良い良いいいいいい（2019/3）っっっっっっっっっっっっっs<br>

っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっx

</div>

</body>

```

```Javascript

$(function(){

var headerHight = 56;

//①ページ内スクロール

$(".navlink1").click(function () {

var i = $(".navlink1").index(this)

var p = $(".about").eq(i).offset().top-headerHight;

$('html,body').animate({ scrollTop: p }, 'fast');

return false;

});

```

### 試した事

①alert('OK');

→アラート命令より前のスクリプトにミスはない事の確認

②jQuely読み込みの、scriptタグを<head>タグの中へ

③<a>ではなく以前の、<li>タグのクラスを’navlink1’に。

### 補足情報（FW/ツールのバージョンなど）

・今回初めて、bootstrapを使用しました。

→✅bootstrapが何か関係しているのではないかと考えています。

jQuelyの使用に何か影響を与えてしまうのでしょうか？

・navタグのtextの色の変更も行う事ができません。

✅これも何か関係あるのでしょうか？

お忙しいとは思いますが、回答お待ちしております。

JavaScript

25037 questions

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

jQuery

9778 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スクロール

76 questions

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

Bootstrap

1661 questions

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン