🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

8582閲覧

ページ内リンクが動かないので、相談させてください。よろしくお願いいたします

shunsaku87

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/03/25 08:06

編集2021/04/01 07:43

前提・実現したいこと

該当サイトリンク
上記のサイトで、別ページからリンクして、ページ内リンクでページ内の指定の場所に飛ばしたいのですが、どうしてもページトップにリンクして、ページ内に飛んでくれません。
それをページ内の指定の場所に飛ばせるようにしたいです。
上記のサイトのいろいろなところで、別ページからきてページ内リンクで指定の場所に飛ばすということをしたいのですが、とりあえず、サイトの中の上記のページの下の方にある「料金はこちら」というところのリンクだけ、hrefの末尾を#laser1として、price.htmlの#laser1に飛ばすようにしてあります。(機能していません)
お忙しいところ申し訳ありませんが、見ていただける方いらっしゃったらよろしくお願いいたします。

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

ページ外から飛んでページ内の指定の場所に飛ばしたいのですが、飛びません。
とあるサイトで、裏側でjsのページトップに戻るボタンのようなものがロード時に一度行われていて、本来は指定の場所にリンクしていても、一瞬でページトップに戻されている可能性がある、というようなことを言っていました。
jsが邪魔している可能性があるのですが、下記のコードの5行目はウィンドウ幅を取得して、、見たいな記述だと思うのですが、行の中にscrollTop()というのがあってこれでトップに飛ばされていないでしょうか。

該当のソースコード

main.js↓

js

1! function (n) { 2 var i = !1, 3 e = n(window).width(); 4 n("#page-top").hide(), n(window).on("load resize orientationchange scroll", function () { 5 640 < n(window).width() ? n("#common-nav").get(0).offsetTop < n(window).scrollTop() ? n(".fix-nav").css({ 6 position: "fixed" 7 }) : (n(".fix-nav").css({ 8 position: "" 9 }), n(".side-links").fadeOut()) : n(".fix-nav").css({ 10 position: "" 11 }), 300 < n(window).scrollTop() ? (1e3 < n(window).width() && (n("#page-top").fadeIn(), n(".side-links").fadeIn()), n(window).width() <= 640 && n(".side-nav").fadeIn(),n("#common-header").fadeOut()) : (n("#page-top").fadeOut(), n(".side-links").fadeOut(), n(".side-nav").fadeOut(),n("#common-header").fadeIn()) 12 }), n(window).on("load resize orientationchange", function () { 13 640 < n(window).width() ? (n("#common-nav").css("height", n(".fix-nav").outerHeight() + "px"), n("#wrapper").css({ 14 paddingTop: "", 15 paddingBottom: "" 16 }), n(".nav-children").css({ 17 display: "" 18 }), n(".nav-parent").removeClass("active")) : (e != n(window).width() && (i = !1, n("#nav-torigger").removeClass("active"), n(".humburger-text").text("MENU"), n("#common-nav").css({ 19 display: "", 20 opacity: "" 21 })), n("#common-nav").css({ 22 height: "" 23 }), n("#wrapper").css({ 24 paddingTop: n("#common-header").outerHeight() + "px", 25 paddingBottom: n(".side-nav").outerHeight() + "px" 26 })) 27 }), n(".nav-parent").hover(function () { 28 640 < n(window).width() && n(this).addClass("active").children(".nav-children").stop().fadeIn() 29 }, function () { 30 640 < n(window).width() && n(this).removeClass("active").children(".nav-children").stop().fadeOut() 31 }), n(".nav-parent a.nav-child-toggle").click(function () { 32 if (n(window).width() <= 640) return n(this).parent(".nav-parent").toggleClass("active"), n(this).siblings(".nav-children").stop().slideToggle(), !1 33 }), n("#nav-torigger").click(function () { 34 i ? (n(this).removeClass("active"), n(".humburger-text").text("MENU"), TweenMax.to(n("#common-nav"), .5, { 35 alpha: 0, 36 onComplete: function () { 37 TweenMax.set(n("#common-nav"), { 38 display: "none" 39 }), i = !1 40 } 41 })) : (n(this).addClass("active"), n(".humburger-text").text("CLOSE"), TweenMax.to(n("#common-nav"), .5, { 42 display: "block", 43 alpha: 1, 44 onComplete: function () { 45 i = !0 46 } 47 })) 48 }); 49 var t = navigator.userAgent; 50 0 < t.indexOf("iPhone") || 0 < t.indexOf("Android") && 0 < t.indexOf("Mobile") ? n(".tel_link").click(function () { 51 window.location.href = n(this).attr("data-tel") 52 }) : (0 < t.indexOf("iPad") || 0 < t.indexOf("Android")) && n(".tel_link").click(function () { 53 window.location.href = n(this).attr("data-tel") 54 }) 55}(jQuery); 56 57/* 追加 */ 58 59

試したこと

・name属性もidと一緒に記述するとブラウザによっては効果あるかもしれないそうなので、やってみました。
・ページトップに戻るボタンがあるのですが、それに関連するjsをまるごと入れ替えて、問題のない記述でやってみましたが、だめでした。ですので、smoothscroll.min.jsは問題にはなっていません。
・ajaxを無効にするのもいいかもしれないとあったので、リンクタグにdata-ajax=”false”と記述してやってみましたがだめでした。
・firefoxで試しましたが、firefoxでは機能しています。chrome、edgeでは機能していません。ウィンドウズを使っているので、pcのサファリでは検証できませんが、iphoneのsafariでやってみるとそちらは機能しました。
iphoneだと、chromeもsafariもedgeもfirefoxも機能します。
pcのchromeが機能しないのはちょっと致命的なのでなんとかしたいですが、これだけ機能するブラウザがあるということはjsの問題じゃないかもしれないのではないでしょうか。

補足情報(FW/ツールのバージョンなど)

どうしてもなぜページ内リンクが機能しないのかわかりません。
どなたかわかる方いらっしゃったら教えてください。
よろしくお願いします。

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

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

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

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

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

shunsaku87

2021/03/25 08:12

すみません、どこがいけなかったでしょうか。 教えていただけると助かります。 よろしくお願いいたします。
K_3578

2021/03/25 08:16

タイトル読んでみて下さい。 「js解読できる方よろしくお願いいたします。」 これでは自分が読めないから代わりに読んで下さいという「作業依頼」にしか 見えないことがわかりませんか? 質問の問題点はこれ以外にもあります。ヘルプの内容理解していれば 指摘されるような内容にならないはずなので修正してみてください。
Lhankor_Mhy

2021/03/25 08:20

なさそうな気がするのですが、「なさそうな気がします」という回答で納得していただけるんでしょうか?
shunsaku87

2021/03/25 08:23

わかりました。 ありがとうございます。
Lhankor_Mhy

2021/03/25 08:33

コードが提示されていないと、一般論的な回答しかできないです。申し訳ないですが。 具体的な解決策が必要であれば、問題が再現するコードを提示してください。
Lhankor_Mhy

2021/03/25 08:34

あ、ご解決されたのですね。それは何よりでした。
shunsaku87

2021/03/25 08:37

わざわざ、回答ありがとうございます。 質問の書き方に問題がありましたので、一度解決済みとさせていただきました。 質問の仕方反省した上で再度投稿させていただきますので、もしよろしければまたよろしくお願いいたします。
K_3578

2021/03/25 08:40

書き方を指摘したのは私なので言っておきますが 問題があるならば質問文編集して書き直せば良いのです。 過去に投稿した内容と同様の質問を再度投稿するのは非推奨の質問です。
shunsaku87

2021/03/25 08:51

ありがとうございます。 すみません、それも考慮するべきでした。 解決済みとしてしまったので、ちゃんと使い方学んだ上でまたやり直させていただきます。
K_3578

2021/03/25 08:56

解決済みにした質問も受付中に戻せますので。 回答に「ベストアンサーをはずす」という表示があるはずです。それを押してください。 とは言え、一度ベストアンサーにした物を外せば一度増えたスコアを元に戻す(マイナスする)事に なります。する前に一言断りは入れておくべきでしょう。
退会済みユーザー

退会済みユーザー

2021/03/25 09:01

「外す、外さない」はまぁ任せるとして、 過去の経験と、その時のめんどくささ、何をしたかを足しときましたよー。 スクロールの検証はページの長さが無いとできないし、他の要素とか絡むので、 誰に答えてもらうにしてももうちょいコード出さないと検証が辛いと思う。
shunsaku87

2021/03/25 09:05

なるほど、了解しました。 改めてやりなおします。 わざわざありがとうございました。
miyabi_takatsuk

2021/03/25 09:24 編集

> ページ内リンクくらいのこと 質問者さんが思っている以上に、めんどうですよ、 ページ内リンク系の処理は。 それ専用のライブラリが必要なくらいには。 なので、これくらいで、と舐めない方がよいかと。 掲載のソースコードは、質問者さんが書いたものでしょうか?
shunsaku87

2021/03/25 09:33

すみません、余計な事言いました。 いや私が書いたものではありません。 私はまだjsを思い通りに記述するスキルはありません。
miyabi_takatsuk

2021/03/25 09:35

わかりました。 では、さすがに、解読までしてしまうと、作業依頼レベルになるため、 方針の提示だけさせていただいて、回答とさせていただきます。
m.ts10806

2021/03/25 09:48 編集

質問は編集できます。
退会済みユーザー

退会済みユーザー

2021/03/25 09:52

軽く読みましたが、navとメニューの挙動、あとはスマホのtelリンクくらいかなぁと。 ってことで下の追記をしてあります。 htmlやCSSも入れて再現しないと細かい調整は難しいので、 数秒後にジャンプさせるスクリプトがこちらの質問の回答になるんじゃないかな?と、考えてます。 location.hashから要素の位置を取ってscrollかなぁ。
Lhankor_Mhy

2021/04/01 07:20

ご提示のページから「料金はこちら」をクリックしたところ、「レーザーシャワー」に飛びました。 当方の認識としては、問題が再現していないのですが、認識の齟齬はありますか?
shunsaku87

2021/04/01 07:24

わざわざありがとうございます。 すみません、質問に書き忘れましたが、firefoxでは機能しています。 私の環境だとchromeで機能しません。 Lhankor_Mhyさんはブラウザは何で試してくださいましたか?
Lhankor_Mhy

2021/04/01 07:34

なるほど、そうでしたか。当方はFirefoxでした。
shunsaku87

2021/04/01 07:35

そうでしたか。お忙しいところありがとうございます。
Lhankor_Mhy

2021/04/01 07:44

問題を把握しました。回答します。
guest

回答3

0

ベストアンサー

他の方の回答で指摘されていないもので有りそうな原因として、「動的にアンカーが生成されている」があるかと思います。

「別ページからリンクして、ページ内リンクでページ内の指定の場所に飛ばしたい」ということは、http://example.com/a.html から http://example.com/b.html#hoge へ移動する、というものだと思います。

この場合、b.html ページ内に id="hoge" または name="hoge" が存在しなくてはいけないと思うのですが、この要素がページ移動した時点で存在しない場合にはページトップに移動してしまいます。
当方の環境でちょっと試してみましたところ、DOMContentLoadedloadでアンカーを追加した場合はアンカーの位置に移動しますので、それよりも遅いタイミングで生成されていないと再現しないと思います。

質問の追記に合わせて追記

こちらはどうでしょうか?
https://wako-skin-clinic.com/price.html?id=laser1

投稿2021/03/26 02:57

編集2021/04/01 07:45
Lhankor_Mhy

総合スコア36930

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

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

shunsaku87

2021/03/26 03:06

わざわざ回答ありがとうございます。 教えていただいたことを元にちょっと思考錯誤してみます。
shunsaku87

2021/04/01 07:48

今リンククリックしてみたらちゃんとページ内リンクできました! この記述の仕方はどういうものなのですか?? お忙しいところほんとすみません!ありがとうございます!! ということは、相対パスなので、href="price.html?id=laser1"とすれば機能するのでしょうか??
Lhankor_Mhy

2021/04/01 07:52

> この記述の仕方はどういうものなのですか?? そういうスクリプトが書かれていました。 https://wako-skin-clinic.com/assets/js/smoothscroll.min.js > 相対パスなので、href="price.html?id=laser1"とすれば機能するのでしょうか?? 当方で試した限りでは、そうです。
shunsaku87

2021/04/01 07:53

ありがとうございます! お手数おかけするので自分でやってみました。すると大丈夫でした! 自分ではどうやっても解決する余地はなかったので本当に感謝いたします!
Lhankor_Mhy

2021/04/01 07:55

どういたしまして。 ご解決されて何よりです。
shunsaku87

2021/04/01 07:55

なるほど!ということはjsが問題だったわけですね! 本当にお手数おかけしました。そこまで見ていただいてお時間取らせてしまい、申し訳ありませんでした。 感謝します。ありがとうございました!
shunsaku87

2021/04/01 08:01

解決した方法をここに記述しておきます。 smoothscroll.min.jsにページ内リンクに関する記述があったので、href="price.html?id=laser1"とすることで解決しました。 わざわざ回答、修正依頼してくださった方々ありがとうございました。
guest

0

HTMLも見ないとなんとも言えませんが、
デバッグの仕方を調べ、自身でデバッグの挑戦をされてください。
一行ごとや、処理の中間の部分で、
各変数などを、console.logなどで中身を表示していき、
自身の理想とする挙動となっているか、などを少しずつ確認していくと、原因の特定につながるかと。

また、ページ内リンクを押した時に、スクロールをアニメーションつきで行えればいい、という要件ならば、
いっそ思い切って、当該の記述を消し(コメントアウトし、内容自体は保持しておいたほうがいい)、
SmoothScrollなどのライブラリを使用するのも一つ手です。
SmoothScrollは、ネイティブJSのみで動かせるものもありますし、jQueryのプラグインとしても用意されています。

ただし、スムーズスクロール以外の機能もつけねばならない、となると、
やはり、当該ソースコードを自身でデバッグしていくしかないかと思います。

投稿2021/03/25 09:42

miyabi_takatsuk

総合スコア9555

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

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

shunsaku87

2021/03/25 10:20

お忙しいところ回答ありがとうございます。 ちょっと理解するのに時間がかかりそうなので、時間かけて自分でやってみます。 長文ありがとうございました。
miyabi_takatsuk

2021/03/25 12:12

何がどう理解できないのでしょうか?
shunsaku87

2021/04/01 06:38

遅くなりまして、すみません。 おっしゃったことは理解できたのですが、どうしたらよいか整理できてなかっただけです。 ありがとうございました。
guest

0

ページ内リンクくらいのことで苦労したくないのですが、

これ書いちゃダメだと思うよ?
たぶん、上位陣ほどスルー対象に認定されるはず…

スムーススクロールをJSで処理するから苦労しているわけで、
CSSにスムーススクロールを任せつつ、飛ばしたい場所へは#アンカーリンクで良いんじゃないかなぁ?

追記 何となく不憫だったのでBA後に追記、以下チラシ裏です。

JSが原因と言われるとそうなのかもしれない。
navがfixedになるタイミングかなぁという気がする。
#アンカーリンクはページ遷移時にどこまでジャンプするかを確定しているから、
自動でスクロールした際にnavへのfixedが有効になり、全体の高さが変わって、
最終的にずれる…という話だと思うのだけど、ちょっと違うかな?

高さが変わった時点でキャンセルされてる?
もしくは、要素が後から出てくるとかだと、
遷移時の高さ取得の際に隠れていた要素の高さが勘定されていないから、
早くスクロールが止まってしまい、その後要素が現れて伸びていく…みたいなのもあったはず。

長々書いたけども、
すべての要素が表示されてからその位置までスクロールさせるという実装をしたけれど、
止まった状態から勝手に走るのが違和感を感じると言われ、
結局2、3秒待ってから動かすという実装は止めた。※縦に長すぎるサイトだったのだよ…

投稿2021/03/25 08:24

編集2021/03/25 08:56
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

shunsaku87

2021/03/25 08:28

わかりました。 ありがとうございます。
shunsaku87

2021/03/25 09:04

わざわざありがとうございます。 上記修正依頼のところにあるように、やり直させていただきますので、ベストアンサーに一度しましたが、外して質問し直させていただきます。スコアつけた後にはずしてしまうことになります。申し訳ありません。 追記していただいた内容、ありがとうございます。 ちょっと理解が追い付かないので、それも含めて再度質問修正します。 わざわざお付き合いいただいたのにすみません。 そういうことでよろしくお願いします。
退会済みユーザー

退会済みユーザー

2021/03/25 09:28

@shunsaku87様 大丈夫ですよー、当方は問題無いです。 ページ内リンクはJS山盛りのページだと綺麗に動かすのに苦労するので、 たっぷり悩んで疑問を上げて、しっかり解消されるのがよろしかと存じます。 以下蛇足です。 僕もまぁそこまできっちりは覚えていませんがっ
shunsaku87

2021/03/25 10:21

優しさ感謝します。 よく考えて挑戦してみます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問