紙芝居風のパララックスに、ページ内（アンカー）リンクを設置したい

Question

現在、紙芝居風のパララックスでのページにアンカーリンクをつけようとしています。

紙芝居風のパララックスの参考サイト
https://www.webprofessional.jp/js-library-scrollreveal-2/
上記のデモ１

紙芝居風のパララックスをつくる為の性質上、z-indexの小さい物の上にどんどんと要素が重なるため、
ページ内リンクも、下に進む動きはできますが、上に上がる動き
（紙芝居を、めくる？重なった要素を剥がすような動き？）
をどうすれば解決できるか分からず止まっております。

このような感じで実装しているサイトも特になく、
分かるかたがいましたらご教示ください。

全部のコードを乗せると、長くなるため、抜粋しております。
具体的にを文面で伝えると、難しいため、
https://xs442579.xsrv.jp/test/recruit/
テスト環境にアップしております。

右上のページ内リンクを押すと、下にスクロールはできるが、上には、戻れない？感じです。

いやいや、position: sticky;　を使用しているからだろ！
に関しましては、事前に概要に書いておりますので、その点はを踏まえて、見てくださませ。

```  <ul class="toc">
    <li class="toc__item">
      <a class="toc__link" href="#split00">
        <img src="<?php echo esc_url(get_theme_file_uri('img/recruit/icon_home.svg')); ?>" alt="HOME">
      </a>
    </li>
    <li class="toc__item">
      <a class="toc__link" href="#split01">01</a>
    </li>
    <li class="toc__item">
      <a class="toc__link" href="#split02">02</a>
    </li>
    <li class="toc__item">
      <a class="toc__link" href="#split03">03</a>
    </li>
    <li class="toc__item">
      <a class="toc__link" href="#split04">04</a>
    </li>
    <li class="toc__item">
      <a class="toc__link" href="#split05">05</a>
    </li>
  </ul>

  <!-- <div class="prev">
    <img src="<?php echo esc_url(get_theme_file_uri('img/recruit/icon_prev.svg')); ?>" alt="">
  </div>

  <div class="next">
    <img src="<?php echo esc_url(get_theme_file_uri('img/recruit/icon_next.svg')); ?>" alt="HOME">
  </div> -->

<div id="luxy" class="split">

  <!-- <div id="split01" class="block block-one">
    <p class="block__text">One</p>
  </div>
  <div id="split02" class="block block-two">
    <p class="block__text">Two</p>
  </div>
  <div id="split03" class="block block-three">
    <p class="block__text">Three</p>
  </div>
  <div id="split04" class="block block-four">
    <p class="block__text">Four</p>
  </div>
  <div id="split05" class="block block-five">
    <p class="block__text">Five</p>
  </div> -->


  <div id="split00" class="block block-home">
    <p class="block__text">Home</p>
  </div>
  <div id="split01" class="block block-one">
    <p class="block__text">One</p>
  </div>
  <div id="split02" class="block block-two">
    <p class="block__text">Two</p>
  </div>
  <div id="split03" class="block block-three">
    <p class="block__text">Three</p>
  </div>
  <div id="split04" class="block block-four">
    <p class="block__text">Four</p>
  </div>
  <div id="split05" class="block block-five">
    <p class="block__text">Five</p>
  </div>
</div>











```CSS
.toc {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 100;
  display: flex;
}

.toc__item {
  display: flex;
  width: 30px;
  height: 30px;
  border: 1px solid #707070;
  border-radius: 50%;
  background: #fff;
}

.toc__item:not(:first-child) {
  font-weight: 700;
}

.toc__item:not(:last-child) {
  margin-right: 20px;
}

.toc__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #30386C;
  /*width: 30px;*/
}

.toc__item:first-child .toc__link img {
  width: 14px;
}

.prev,
.next {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 40px;
}

.prev {
  top: 30px;
}

.next {
  bottom: 30px;
}




.block {
  /* スクロールスナップ */
  /*scroll-snap-align: start;*/
  height: 100vh;


  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}

.block-home {
  background: #f6bfbc;
}

.block-one {
  background: #212E32;
  color: #fff;
  z-index: 10;
}

.block-two {
  background: #85937A;
  z-index: 20;
}

.block-three {
  background: #d0af4c;
  z-index: 30;
}

.block-four {
  background: #4c6473;
  z-index: 40;
}

.block-five {
  background: #c37854;
  z-index: 50;
}

.block__text {
  font-size: 60px;
  font-family: 'Great Vibes', cursive;
}```



```jQuery
$(function(){

  /*=================================================
  スムーススクロール
  =================================================*/
  $('a[href^="#"]').click(function(){
    let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top;
    $("html, body").animate({scrollTop:position}, 500, "swing");
    return false;
  });

});

Comments

[hatena19]

現状のHTMLとCSSのコードを質問に追記して、どのようにうまくいかないのか、具体的に説明してください。

[退会済みユーザー]

修正しております。

[hatena19]

修正ありがとうございました。状況が把握できました。
回答しましたのて、ご参考に。

[退会済みユーザー]

ご回答、ありがとうございます！
実装したいことが、できました。

コピですと、自分のためにならないため、このあと、なぜそうなるのか？調べます。

ありがとうございました！

[hatena19]

やっていることは単純なことです。
index(this) で何番目のaリンクがクリックされたか取得します。
画面高にそれをかければ、スクロール位置が計算できます。
各要素の高さ=画面高(!00vh) なのでできる技です。

[退会済みユーザー]

追記も、ご丁寧にありがとうございます

Answer 1

position: sticky;を使っていると、スクロールすることによってoffset().top;も変化するので、これを使う方法では難しいですよね。
発想を変えて、何番目のリンクをクリックしたかによって、スクロール量を決めれば簡単です。

$(function(){
  /*=================================================
  スムーススクロール
  =================================================*/
  $('a[href^="#"]').click(function(){
    let windowHeight = $(window).height();
    let index = $('a[href^="#"]').index(this);
    let position = windowHeight * index;
    $("html, body").animate({scrollTop:position}, 500, "swing");
    return false;
  });
});