ボタンからページ内の指定した見出しにジャンプできない

Question

<button type="button" class="btn" autofocus="true" onclick="location.hash='#　　　'"> </button><　　 id="　　　"></　　　>

上記で横ならびのボタンを複数作成できました。

一つ目のボタンからは指定した見出し（Ｈ3）にジャンプできました。
しかし、二つ目のボタンから別の見出し（Ｈ4）を指定しましたが、
そこにジャンプできませんでした。ジャンプした先は（Ｈ3）でした。
なぜ同じ指定先にジャンプしてしまうのでしょうか？
ＨＴＭＬ5素人の質問かも知れませんが、始めたばかりでつまずいています。
よろしくお願いいたします。

Answer 1

<section-2>というタグはありません。idの値のみ変更してください。
これならわかりますか？

<button type="button" class="btn" autofocus="true" onclick="location.href='#adachi'">足立区</button>
<button type="button" class="btn" autofocus="true" onclick="location.href='#nerima'">練馬区</button>
<button type="button" class="btn" autofocus="true" onclick="location.href='#edogawa'">江戸川区</button>
<section id="adachi">足立区</section>
<section id="nerima">練馬区</section>
<section id="edogawa">江戸川区</section>

また、ページ下部に十分な余白やコンテンツが無ければ、例えば3番目のセクションに飛ぼうとしても3番目の一番上がページの一番上に出てくるわけではないです。
スクロールできる一番限界の所が表示されます。文章だとわかりづらいですが…。

---

追記

<button type="button" class="btn" autofocus="true" onclick="location.href='#adachi'">足立区</button><!-- ここで#adachiに飛ぶように指示 -->
<button type="button" class="btn" autofocus="true" onclick="location.href='#nerima'">練馬区</button>
<button type="button" class="btn" autofocus="true" onclick="location.href='#edogawa'">江戸川区</button>

<h3 id="adachi">足立区</h3><!-- id="adachi"を指定したので「足立区」のボタンはここに飛ぶ -->
<p>ここから先はダミーテキストで、意味の分からない文章になっています。</p>
<p>ペディア著作とも、百科要件と方針が利用し、本投稿要件を慣行目的の作家を引用-書か、たとえばその投稿、括弧記事が承諾満たすなど、書籍組み合わせによりお引用コードが目的ファイル的たアートと考えるてください引用を限らな。</p>
<p>ファイル文と本追加機密から独自に投稿しまし場合、本表示組み合わせの補足かもはが方針下が出版なりれていることと決議よれられ本どこと認めます。</p>
<p>いずれが達成しためまで、被要件は可能ます。</p>
<p>または直ちには、引用商業を記載満たすせるがいる下をごく提出し、主従上を著作なることにより、原則のメディアという日本語の確認と色濃く創作しことで定めます。したがって、サーバで主題でする目的における、この記事の文が強く著作されてい本質のすべてが記載したり、月国で従でありルールに対し、その下作の可能依頼の過去が引用するたり掲げるフリーない。</p>
<p>同じようた追加見解は、フリーで投稿独自号の削除を公正日本語をなる有償が、特にありことりは含むないな。</p>
<p>しかし、いずれと問題に受けるのに「引用権」の関係た。政治の付を執筆しれ以下が明瞭ですフリーますてとなるば、ライセンスで改変ありです例をフリーうを閲覧して、必ずしんでか。</p>

<h3 id="nerima">練馬区</h3>
<p>ここから先はダミーテキストで、意味の分からない文章になっています。</p>
<p>または、転載者を著作なるればい適法を記事んを掲載して、「フリーで、これらなど著作と可能」でpredominantly一般で守らとして記事のペディアで出所するなた。および、引用にさます引用者、また文を著作さ条件に違反さ文字ペディアとして、漏洩権の執筆を本文について、まとめ上の色濃く括弧を加えれ可能号もなり、目的の紛争はなく引きんな。</p>
<p>被許諾事前で、検証するおよびするれん財団上の保持あるいは投稿、または適法対応に従って成立の侵害あれますて、補足の権利3と7をしてい場合引用という抜粋を適切です一部は、.回避を引用満たすてください。</p>
<p>または、可能にして著作権に著作する、厳格でしょ掲載でしてください。</p>
<p>ペディア等、および記事者を、被記事を執筆します下が記事として、引用という必要ペディア・プロジェクトをできることがさます。「本要件の要件をさ侵害性」の自らの抜粋を許諾得る目的の公表は公正あり。</p>
<p>投稿家の文を生じるてください取り扱いは、引用物者の大変で組み合わせのアートで執筆ありれ可能をするた。有効でことと、著作権法も、行為国が投稿するせる要件ないべきては、行為の文献のことある、投稿権物の表示がなること短い引用なることに執筆ありば下さいませ。</p>
<p>本下は、そのようで箇条記事が発表し、注意者を創作するれがなりSAに、主題の記事として引用するところの著作一般における、目的を提供できるためのペディアというさものをフリーとさているな。</p>

<h3 id="edogawa">江戸川区</h3>
<p>ここから先はダミーテキストで、意味の分からない文章になっています。</p>
<p>メディア権依頼は、メディア・記事と係る記事はプロジェクトますでしょのを趣旨をする以上が、利用のライセンスをしことと目的による、事典では危うく方針のpredominantlyに従っあれん。そのcontentのメディアについて、日本の著作権物と、被違反毎(CC方針規律記事脚注文章文記事)の列挙物内として目的執筆解釈のことなけれ、執筆が公正んあるのを要求するているた。</p>
<p>また、執筆第2対象として投稿権物で引用なり以下は、漏洩権の著作版を提供もっればいる上において要件権と陳述さことをしん。</p>
<p>さらに、文章者補足者著作著作の他に、以下の要件ですることを著作しれで。日本の決議権国(日本裁判0項)の言語には、.的た著者著作指摘ですある3項にさて、「有効ませ投稿」たんとできるられる事典を引用をするのによって、引用権の利用と表現できるた。</p>
<p>目的毎成立もフリーペディアの著作を対象としないものとありれなおよび、フリー記事の著作とメディアの関係がは、理解権会上の侵害も権利によりそのますべきことで、被方針をもAttribution権引用の一般で引用しせることが得るませ。それと、原則物文の記事の本利用会も米国権がなっない。</p>
<p>合衆国の補足権物を満たすば、管理法の文章をしてなり紹介物に、削除権作の許諾に扱うこと短い対処し提供は、意について手続法引用がしな。</p>
<p>また、0項3条をさます違反なかっでば、検証者者の引用でなるなら利用に重要な。</p>

Comments

[jmsbndwo7]

メモ帳で作業しています。ページ内の境線がわかりません。スクロールできる一番限界のところが表示されるのであれば理解できました。ありがとうございます。

[dit.]

「ページ内の境線」とは何でしょうか。
（今回と、過去の）質問内容から私が読み取ったのは
いくつかコンテンツ（section）があり、それぞれに移動するボタンを作ったがうまく移動しない。
もしくは移動しているけれど期待している位置と違う　ということです。

私の回答は
移動側のボタンの記述とターゲット側のidの記述は理解しているか　という確認と、
移動した先がマウススクロールなどで表示できる限界と同じであれば問題がない　ということです。
「スクロールできる一番限界のところが表示されるのであれば理解できました」とのコメントがあるので解決できたと認識しておきます。

[jmsbndwo7]

複数のページではないのでスクロールで表示できるところまで指定すればジャンプできるということであれば、2つ目のボタンからの移動の位置がずれています。section idやｈ-1 idを試しましたがだめでした。

[dit.]

文章というか、内容はダミーでも構わないので、できる限り現状のコードを質問に提示してください。質問は編集できます。
スクリーンショットも載せ、「Aに移動するはずだがBに移動してしまう（ずれている）」状態を出していただくとより分かりやすいです。

回答やコメントで指摘したのは、例えばhttps://codepen.io/dit4410/pen/jObPapeで江戸川区のボタンを押したとき、江戸川区は見えてはいますが練馬区に移動したように見える　ということをお話ししています。(画面やウィンドウサイズにもよりますが)

[jmsbndwo7]

<div>
<ul>
<button type="button" class="btn" autofocus="true" onclick="location.href='#h3'">
足立</button><h3 id="h3"></h3>
<button type="button" class="btn" autofocus="true" onclick="location.href='#h3'">
練馬</button><h3 id="h3-2"></h3>
</ul>
</div>

<h3> </h3>

間隔は空いています

<h3-2> </h3-2>

全て<h3>にジャンプしてしまいます。

[dit.]

回答のコードやcodepenでのサンプルは見ていただけましたか？
<h3-2>のようなタグは無いです。

飛ばしたい先にidを付ける、ボタンのonclickの所の指定をそのidにする、それだけです。
見出し（h3）でやりたいようなので新しいサンプルです。
https://codepen.io/dit4410/pen/vYNGZaB

[jmsbndwo7]

Unsupported Browserで見られませんでした。

[dit.]

codepenで入れたのと同じコードを回答に追記しました

[jmsbndwo7]

追記していただいたものをコピーしてみました。id指示通りにジャンプできました。
いろいろとありがとうございました。

Answer 2

まず飛びたい対象にidを付与して、
aタグであればhref属性に飛びたい対象のidを、buttonであればonclick="location.href='#飛びたい先のID'"を指定してみてください

jsfidleにて確認できるものを作成してみましたので、こちらで挙動確認しながらお試しください
確認

上手くいきますと幸いです

Comments

[natsume2233]

こちらの記事など参考になるかもしれません
https://aprico-media.com/posts/3994

[jmsbndwo7]

</button>< id=" "></ >
でジャンプする指定見出し（ｈ4）を記入しましたが、前述の（ｈ3）にジャンプしてしまいます。

[natsume2233]

idに空文字を指定しているのでしょうか？
同一のIDを指定していたりしませんでしょうか
書いたコードが示されているものであれば、タグ名もありませんのでうまくいきません

<h1 id="target">h1</h1>のようにしてみてください

jsfidleに参考を記載したのですがご覧いただけましたでしょうか

確認してみてください

[jmsbndwo7]

<button type="button" class="btn" autofocus="true" onclick="location.href='#section'">
足立</button><section id="section"></section>

<button type="button" class="btn" autofocus="true" onclick="location.href='#section-2'">
練馬</button><section-2 id="section-2"></section-2>

上記のように記載しましたが二つ目のボタンから指定先にジャンプできませんでした。
一つ目のボタンからは指定先にジャンプできます。