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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

2回答

4944閲覧

ページ内アンカーリンクがIE11で、クリックしても動作しない

cotton88

総合スコア87

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/06/26 15:23

ページ内アンカーリンクがIE11で、クリックしても動作しません。。
console.logでは、#aboutなど取得できている様子です。

./#about などしたらリンクは動作しますが、アニメーションせず。
どなたかお分かりの方、ご教授下さい。。

よろしくお願い致します。

HTML

1<ul> 2<li><a href="#about">アバウト</a></li> 3<li><a href="#outline">概要</a></li> 4<li><a href="#event">イベント</a></li> 5<li><a href="#timeschedule">タイムスケジュール</a></li> 6<li><a href="#access">アクセス</a></li> 7</ul> 8 9<section id="about" class="element_section about"> 10・・・ 11</section>

javascript

1 $('a[href^="#"]:not(".event_item")').on('click', function(){ 2 //デフォルトのイベントをキャンセル 3 event.preventDefault(); 4 5 var target = $(this.hash); 6 console.log(this.hash); 7 console.log(target); 8 if (!target.length) return; 9 10 var navHeight; 11 if (window.matchMedia('(min-width:769px)').matches) { 12 navHeight = 67; 13 } else if (window.matchMedia('(max-width:768px)').matches) { 14 navHeight = 0; 15 } 16 var targetY = target.offset().top - navHeight; 17 18 $('body').animate({scrollTop: targetY}, 500, 'swing'); 19 });

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

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

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

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

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

guest

回答2

0

ベストアンサー

$('html,body').animate( とするか、IEだけ振り分けするかすれば動くと思います。

【jQuery でページスクロール - daily dayflower】
http://d.hatena.ne.jp/dayflower/20081007/1223358033

【ie11のjavascriptでのブラウザ判定がmsieではなくなっていた | スターフィールド株式会社】
https://sterfield.co.jp/designer/ie11のjavascriptでのブラウザ判定がmsieではなくなっていた/

投稿2017/06/26 15:32

kei344

総合スコア69364

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

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

0

イベントは引数でわたしてください
<a href="#about">アバウト</a></li>
にclass:event_itemがないので動かないのが正しいのでは?

以下、aboutは移動せず、outlineは移動する

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ $('a[href^="#"]:not(.event_item)').on('click', function(e){ e.preventDefault(); }); }); </script> <ul> <li><a href="#about">アバウト</a></li> <li><a href="#outline" class="event_item">概要</a></li> <li><a href="#event">イベント</a></li> <li><a href="#timeschedule">タイムスケジュール</a></li> <li><a href="#access">アクセス</a></li> </ul> <div style="height:999px">dummy</div> <section id="about" class="element_section about"> about </section> <div style="height:999px">dummy</div> <div id="outline">outline</div> <div style="height:999px">dummy</div>

投稿2017/06/27 00:22

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問