stickyで固定したページのアンカーリンクで上に飛べません

縦長1ページのサイトで

css
1width:100%;
2height:100vh;
3position:sticky;
4top:0;

と書いてラッパーごとに重なっていくような表現をしているのですが、
縦長なのでアンカーリンクを設置したいと思い、どこからでも好きなところに飛べるように
position:fixed;
で固定したのですが、うまく機能しませんでした。

色々試したところ、上から下には飛べるが下から上には飛べません。
原因はstickyでtopで固定しているので上にあるはずのラッパーが今あるラッパーの下に潜り込んでいる状態でうまく飛べないということがわかりました。

解決方法がありましたら是非知りたいです。
よろしくお願いします！

追記
書き直したらちゃんと動いたので見直してみます。
やりたかったことはこちらです。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>sticky</title>
6    <link rel="stylesheet" href="style.css">
7  </head>
8  <body>
9    <div class="first-view" id="top">
10      <h1>固定なし</h1>
11    </div>
12    <div class="contents" id="one">
13      <p>ほげほげふがふが</p>
14    </div>
15    <div class="contents" id="two">
16      <p>ほげほげふがふが</p>
17    </div>
18    <div class="contents" id="three">
19      <p>ほげほげふがふが</p>
20    </div>
21    <div class="anchor">
22      <a href="#top">トップへ</a>
23      <a href="#one">ページ１</a>
24      <a href="#two">ページ２</a>
25      <a href="#three">ページ３</a>
26    </div>
27  </body>
28</html>
29

css
1*{
2  margin:0;
3  padding: 0;
4}
5
6.first-view{
7  width: 100%;
8  height: 100vh;
9}
10.contents{
11  width: 100%;
12  height: 100vh;
13  position: sticky;
14  top:0;
15  color: #fff;
16}
17
18#one{
19  background-color: #ccc;
20}
21#one p{
22  font-size: 20px;
23}
24#two{
25  background-color: #aaa;
26}
27#two p{
28  font-size: 30px;
29}
30#three{
31  background-color: #888;
32}
33#three p{
34  font-size: 40px;
35}
36
37.anchor{
38  position: fixed;
39  top: 50%;
40  left: 50%;
41  transform: translate(-50%);
42}
43.anchor a{
44  display: inline-block;
45  padding:20px;
46  background-color: #ddd;
47}
48

miyabi_pudding

2019/12/17 16:52

z-indexで重なり順を調整すればよいのでは？上記踏まえて、下記をお答えしたものを質問に追記して下さい。質問は編集できます。・CSSもHTMLもなるたけ全て記載して下さい。質問文に記載いただいてる部分以外に原因がある可能性もあるので、第三者でも再現できるコードを提示して頂かないと、回答しようがありません。・ブラウザを記載して下さい。・上記に付随して、PCなのか、スマホなのか記載して下さい。

kuroyu

2019/12/18 21:04 編集

すみません、質問が下手でした。全てのコードを乗せるには少しはばかれられる内容でしたので動きの部分のみのコードを書きなおして乗せようとしたところちゃんと動いてしまったので、miyabiさんがおっしゃった通り私が思っている所以外に原因があったようです。z-indexでは重なり調整していました。一旦質問を削除したほうがいいのかわかりませんが、また自分で試してみて原因が分かり次第自己解決法に記載します。ご指摘頂いた質問方法も次に活かそうと思います。

miyabi_pudding

2019/12/19 01:42 編集

質問は削除せず、自己解決を投稿することをお勧めします。同じ悩みを持った人が見たときの助けとなるはずなので。 teratail自体がそういう趣旨で今の仕様となっています。（むやみに投稿を削除させてない理由）