Q&A
ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。
質問は編集できますので。
ポートフォリオを作成中で、どうしてもわからないのでご教授ください。
上部に横並びのメニューがあって、ページ内リンク(スクロール)ページはできたのですが、
作品のページがあり、クリックすると別ページにとぶのですが、この別のページでも上部のメニューは一緒で、そこをクリックしてもスクロールできていたページにとばないんです・・。
jQueryで新たな記述が必要なんだと思うのですが、
素人なもので解決策が見つからず、助けていただけると嬉しいです。
<div class="warapper"> <nav> <ul class="header-nav"> <li><a href="#about">About</a></li> <li><a href="#skill">Skill</a></li> <li><a href="#works">Works</a></li> </ul> </nav> <section class="about" id="about"> <div class="warapper"> <div class="title"> <h2>About</h2> </div>
< jQuery>
('a[href*="#"]').click(function ()
var elmHash = $(this).attr('href');
var pos = $(elmHash).offset().top;
$('body,html').animate({scrollTop: pos}, 500);
return false;
});
HTML、jQuery等は別々の<code>ブロックにして頂けると見やすくなります。
https://teratail.com/questions/238564
MarkDownの使い方に関してはこの質問の回答などを参考にされて下さい。
「ページ内リンク」はHTMLにあるので分かるのですが、
「作品のページがあり、クリックすると別ページにとぶのですが、」というのが具体的に何のことかサッパリです。このへんを具体的に説明して、これに関連するコードも提示してください。
回答1件
0
ベストアンサー
こんにちは。
作品のページがあり、クリックすると別ページにとぶのですが、この別のページでも上部のメニューは一緒で、そこをクリックしてもスクロールできていたページにとばない
整理すると
作品のページ（上部のメニューは別？） ↓ 〇移動できる 別のページ（上部のメニューは一緒） ↓ ✖移動できない スクロールできていたページ（上部のメニューは一緒）
ということですよね？
そして、「上部のメニュー」がご提示いただいたコードで、「別のページ」にも「スクロールできていたページ」にも同じコードがあるのですよね？
href="#about"のようなハッシュから始まる相対パスは、そのページ内部へのリンクとして認識されますので、他のページへは飛びません。
href="hoge.html#about"のように、パス（の一部）を表記してください。
なお、スクリプトも書き換えた方がいいと思います。そのままだとハッシュのあるURLのリンクを全てキャンセルしてしまいます。
('a[href*="#"]')→('a[href^="#"]')
投稿2021/04/14 04:58
編集2021/04/14 05:01
総合スコア36158
あなたの回答
tips
プレビュー
