同一サイト上で違うタブへ切り替えた際に、移動先のページトップへ移動したい。

現状の仕様

初心者です。
使用しているのはFC2ホームページ作成ソフトのHTMLとピュアCSSです。
スクロールすると画面についてくるハンバーガーメニューを実装しています。
メニューの中身は、クリックすると別サイト(違うURL)に移動するものではなく、同一サイト上(同じURL)でタブページが切り替わるようになっています。

起きている問題

例えば「メニュー1」を最下部までスクロールした状態で、画面についてきているハンバーガーメニューで「メニュー2」をクリックすると、メニュー2の最下部ページへ移動してしまいます。
「メニュー1」から「メニュー2」へは正常に切り替わるが、ページのトップ(最上部)へ切り替わるのではなく、元居た上下位置のまま切り替わってしまいます。

理想の動き

「メニュー1」の上下どの位置にスクロールされた状態でも、ハンバーガーメニューで「メニュー2」を選んだ時に、「メニュー2のページトップ」へ移動してほしい。

自分で試してみたこと

「a href=」のリンク頭に「＃」をつけてみたのですが、トップへは移動してくれず困っております。

ご回答者様へお願い

HTMLとピュアCSSのみのコードで解決したいです。
まだ勉強中の初心者でして、質問内容や提示したコードに不足がある場合もございます。大変分かりずらい質問内容で恐縮ですが、ご指示いただけますと不足の情報を提示いたします。
また、「～の位置に～のコードを入れる」というふうにご教示いただけますと大変助かります。
どうぞよろしくお願いいたします。

実装しているコード

文字数制限オーバーのため一部省略して下記に記載しています。
不足があればご指示願います。

HTML
1<head>
2 <script type="text/javascript">
3      function ChangeTab(tabname) {
4        document.getElementById('tab1').style.display = 'none';
5        document.getElementById('tab2').style.display = 'none';
6        document.getElementById('tab3').style.display = 'none';
7        document.getElementById(tabname).style.display = 'block';
8      }
9    </script>
10</head>
11
12<content>
13  <input id="hamburger" class="hamburger" type="checkbox"/>
14  <label class="hamburger" for="hamburger">
15    <i></i>
16    <text>
17      <close>close</close>
18      <open>menu</open>
19    </text>
20  </label>
21  <section class="drawer-list">
22        <ul>
23        <li><a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">メニュー1<font size="1">サブメニュー1</font></a></li>
24        <li><a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">メニュー2<font size="1">サブメニュー2</font></a></li>
25        <li><a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">メニュー3<font size="1">サブメニュー3</font></a></li>
26      </ul>
27    <label class="overwrap" for="hamburger"></label>
28   </section>
29</content>

CSS
1.drawer-list{
2z-index: 2;
3}
4
5ul {
6  list-style: none;
7  margin: 0;
8  padding: 0;
9}
10
11.drawer-list {
12  position: fixed;
13  right: 0;
14  top: 0;
15  height: 100vh;
16  width: 60vw;
17  transform: translate(100vw, 0);
18  /* ie workaround */
19  -ms-transform: translatex(-100vw);
20  box-sizing: border-box;
21  pointer-events: none;
22  padding-top: 50px;
23  transition: width 475ms ease-out, transform 480ms ease, border-radius 0.8s 0.1s ease;
24  border-bottom-left-radius: 100vw;
25  background-color: red;
26  background-color:rgba(254,244,244,0.9);
27}
28
29@media (min-width: 768px) {
30  .drawer-list {
31    width: 40vw;
32  }
33}
34.drawer-list ul {
35  height: 100%;
36  width: 100%;
37  margin: 0;
38  padding: 0;
39  overflow: auto;
40  overflow-x: hidden;
41  pointer-events: auto;
42}
43.drawer-list li {
44  list-style: none;
45  text-transform: uppercase;
46  pointer-events: auto;
47  white-space: nowrap;
48  box-sizing: border-box;
49  transform: translatex(100vw);
50  /* ie workaround */
51  -ms-transform: translatex(-100vw);
52}
53.drawer-list li:last-child {
54  margin-bottom: 2em;
55}
56.drawer-list li a {
57  text-decoration: none;
58  color: #622d18;
59  text-align: left;
60  display: block;
61  padding: 1rem;
62  font-size: calc(24px - .5vw);
63}
64@media (min-width: 768px) {
65  .drawer-list li a {
66    text-align: right;
67    padding: 0.5rem;
68  }
69}
70.drawer-list li a:hover {
71  cursor: pointer;
72  background-color: red;
73  background-color:rgba(245,178,178,0.4);
74}
75
76input.hamburger {
77  display: none;
78}
79input.hamburger:checked ~ .drawer-list {
80  transform: translatex(0);
81  border-bottom-left-radius: 0;
82}
83input.hamburger:checked ~ .drawer-list li {
84  transform: translatex(0);
85}
86input.hamburger:checked ~ .drawer-list li:nth-child(1) {
87  transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
88}
89input.hamburger:checked ~ .drawer-list li:nth-child(2) {
90  transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
91}
92input.hamburger:checked ~ .drawer-list li:nth-child(3) {
93  transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
94}
95input.hamburger:checked ~ .drawer-list li:nth-child(4) {
96  transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
97}
98input.hamburger:checked ~ .drawer-list li:nth-child(5) {
99  transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
100}
101input.hamburger:checked ~ .drawer-list li:nth-child(6) {
102  transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
103}
104input.hamburger:checked ~ .drawer-list li:nth-child(7) {
105  transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
106}
107input.hamburger:checked ~ .drawer-list li:nth-child(8) {
108  transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
109}
110input.hamburger:checked ~ .drawer-list li:nth-child(9) {
111  transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
112}
113input.hamburger:checked ~ .drawer-list li:nth-child(10) {
114  transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
115}
116input.hamburger:checked ~ .drawer-list li:nth-child(11) {
117  transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
118}
119input.hamburger:checked ~ .drawer-list li:nth-child(12) {
120  transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
121}
122input.hamburger:checked ~ .drawer-list li:nth-child(13) {
123  transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
124}
125input.hamburger:checked ~ .drawer-list li:nth-child(14) {
126  transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
127}
128input.hamburger:checked ~ .drawer-list li:nth-child(15) {
129  transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
130}
131input.hamburger:checked ~ .drawer-list li:nth-child(16) {
132  transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
133}
134input.hamburger:checked ~ .drawer-list li:nth-child(17) {
135  transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
136}
137input.hamburger:checked ~ .drawer-list li:nth-child(18) {
138  transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
139}
140input.hamburger:checked ~ .drawer-list li:nth-child(19) {
141  transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
142}
143input.hamburger:checked ~ .drawer-list li:nth-child(20) {
144  transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
145}
146input.hamburger:checked ~ .drawer-list li:nth-child(21) {
147  transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
148}
149input.hamburger:checked ~ .drawer-list li:nth-child(22) {
150  transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
151}
152input.hamburger:checked ~ .drawer-list li:nth-child(23) {
153  transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
154}
155input.hamburger:checked ~ .drawer-list li:nth-child(24) {
156  transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
157}
158input.hamburger:checked ~ .drawer-list li:nth-child(25) {
159  transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
160}
161input.hamburger:checked ~ .drawer-list li:nth-child(26) {
162  transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
163}
164input.hamburger:checked ~ .drawer-list li:nth-child(27) {
165  transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
166}
167input.hamburger:checked ~ .drawer-list li:nth-child(28) {
168  transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
169}
170input.hamburger:checked ~ .drawer-list li:nth-child(29) {
171  transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
172}
173input.hamburger:checked ~ .drawer-list li:nth-child(30) {
174  transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
175}
176input.hamburger:checked ~ .drawer-list li:nth-child(31) {
177  transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
178}
179”同上”(32) {
180”同上” 2.56s ”同上”
181}
182”同上”(33) {
183”同上” 2.64s ”同上”
184}
185”同上”(34) {
186”同上” 2.72s ”同上”
187}
188”同上”(35) {
189”同上” 2.8s ”同上”
190}
191”同上”(36) {
192”同上” 2.88s ”同上”
193}
194”同上”(37) {
195”同上” 2.96s ”同上”
196}
197”同上”(38) {
198”同上” 3.04s ”同上”
199}
200”同上”(39) {
201”同上” 3.12s ”同上”
202}
203”同上”(40) {
204”同上” 3.2s ”同上”
205}
206”同上”(41) {
207”同上” 3.28s ”同上”
208}
209”同上”(42) {
210”同上” 3.36s ”同上”
211}
212”同上”(43) {
213”同上” 3.44s ”同上”
214}
215”同上”(44) {
216”同上” 3.52s ”同上”
217}
218”同上”(45) {
219”同上” 3.6s ”同上”
220}
221”同上”(46) {
222”同上” 3.68s ”同上”
223}
224”同上”(47) {
225”同上” 3.76s ”同上”
226}
227”同上”(48) {
228”同上” 3.84s ”同上”
229}
230”同上”(49) {
231”同上” 3.92s ”同上”
232}
233”同上”(50) {
234”同上” 4s ”同上”
235}
236input.hamburger:checked ~ .drawer-list li a {
237  padding-right: 15px;
238}
239input.hamburger:checked ~ label > i {
240  background-color: transparent;
241  transform: rotate(90deg);
242}
243input.hamburger:checked ~ label > i:before {
244  transform: translate(-50%, -50%) rotate(315deg);
245}
246input.hamburger:checked ~ label > i:after {
247  transform: translate(-50%, -50%) rotate(-315deg);
248}
249input.hamburger:checked ~ label close {
250  color: #622d18;
251  width: 100%;
252}
253input.hamburger:checked ~ label open {
254  color: rgba(0, 0, 0, 0);
255  width: 0;
256}
257
258label.hamburger {
259  z-index: 9999;
260  position: relative;
261  display: block;
262  height: 400px;
263  width: 50px;
264}
265label.hamburger:hover {
266  cursor: pointer;
267}
268label.hamburger text close,
269label.hamburger text open {
270  text-transform: uppercase;
271  font-size: 0.8em;
272  align-text: center;
273  position: absolute;
274  transform: translateY(220px);
275  text-align: center;
276  overflow: hidden;
277  transition: width 0.25s 0.35s, color 0.45s 0.35s;
278}
279label.hamburger text close {
280  color: rgba(0, 0, 0, 0);
281  right: 0;
282  width: 0;
283}
284label.hamburger text open {
285  color: #622d18;
286  width: 100%;
287}
288label.hamburger > i {
289  position: absolute;
290  width: 100%;
291  height: 2px;
292  top: 50%;
293  background-color: #622d18;
294  pointer-events: auto;
295  transition-duration: 0.35s;
296  transition-delay: 0.35s;
297}
298label.hamburger > i:before, label.hamburger > i:after {
299  position: absolute;
300  display: block;
301  width: 100%;
302  height: 2px;
303  left: 50%;
304  background-color: #622d18;
305  content: "";
306  transition: transform 0.35s;
307  transform-origin: 50% 50%;
308}
309label.hamburger > i:before {
310  transform: translate(-50%, -14px);
311}
312label.hamburger > i:after {
313  transform: translate(-50%, 14px);
314}
315
316label.hamburger {
317  position: fixed;
318  top: 15px;
319  right: 15px;
320}
321
322.drawer-list li {
323  position: relative; 
324  z-index: 2;
325}
326label.overwrap {
327  pointer-events: auto;
328  position: fixed;
329  top: 0;
330  left: -60vw;
331  width: 100vw;
332  height: 100vh;
333  z-index: 1;
334}

hatena19

2022/06/19 00:08

ChangeTab関数のコードの提示と、「タブページ」とは具体的に何なのか。それをどのように実装しているのか。の説明を追記してください。

Belltan

2022/06/19 03:11

修正依頼いただきありがとうございます。質問内容に追記いたしました。が、これでよいのか少し自信がありません・・。また追加・修正が必要な場所があればご教示いただけますと幸いです。ご査収いただけますでしょうか。

行動規範の内容に同意します

回答1件

スクリプトの最後にページトップへ移動するコマンドを追加すればいいでしょう。

JavaScript
1function ChangeTab(tabname) {
2  document.getElementById('tab1').style.display = 'none';
3  document.getElementById('tab2').style.display = 'none';
4  document.getElementById('tab3').style.display = 'none';
5  document.getElementById(tabname).style.display = 'block';
6  window.scroll(0);
7}

おまけ
スムーズにスクロールさせたければ、
window.scroll({top: 0, behavior: 'smooth'});
に変更してください。

投稿2022/06/19 05:58

hatena19

総合スコア33715

Belltan

2022/06/20 01:33

ご回答ありがとうございます。しかしなぜかJSが反応しないことが多く、今回のコードも試しましたが改善しませんでした。恐縮ですがピュアCSSとHTMLのコードのみで解決したいです。何か他に方法はありますでしょうか。

hatena19

2022/06/20 02:11

現状、JSでタブ切り替えしてますので、そこからピュアCSSに変更しようとするとHTMLから大幅に変更する必要があります。ラジオボタンを使って切り替える方法が一般的になります。「CSS タブ切り替え」で検索するサンプルコードが見つかりますので、参考にしてください。 FC２ホームページとのことですが、私も以前使っていたことがありますが、JSにも対応していますので、JSが反応しないということは、設置してあるJSに問題があることだと思います。つまり、対応としては、ピュアCSSとHTMLに全面的に書き換えるか、JSの問題点を探してそれを改善する、のどちらかになります。どちらがいいかは、質問者さんのスキルが分からないし、ホームページの全体像が分からないので、なんとも言えませんが、どちらにしてもそれなりのスキルは必要になります。

行動規範の内容に同意します