【CSS】ページ内リンク（アンカーリンク）の位置がズレる、CSSで調整する

<header class="fixed_header">
  <h1>固定ヘッダーで隠れる（ズレる）</h1>
</header>

<section class="anchor_section">
  <div class="inner">

    <ul class="list" id="m_01">
      <li><a href="#a_1">1</a></li>
      <li><a href="#a_2">2</a></li>
      <li><a href="#a_3">3</a></li>
      <li><a href="#a_4">4</a></li>
      <li><a href="#a_5">5</a></li>
      <li><a href="#a_6">6</a></li>
    </ul>

    <div class="oneArea" id="a_1">
      <div class="one_title">1</div>
      <a class="button" href="#m_01">▲ メニューに戻る</a>
    </div>

    <div class="oneArea" id="a_2">
      <div class="one_title">2</div>
      <a class="button" href="#m_01">▲ メニューに戻る</a>
    </div>

    <div class="oneArea" id="a_3">
      <div class="one_title">3</div>
      <a class="button" href="#m_01">▲ メニューに戻る</a>
    </div>

    <div class="oneArea" id="a_4">
      <div class="one_title">4</div>
      <a class="button" href="#m_01">▲ メニューに戻る</a>
    </div>

    <div class="oneArea" id="a_5">
      <div class="one_title">5</div>
      <a class="button" href="#m_01">▲ メニューに戻る</a>
    </div>

    <div class="oneArea" id="a_6">
      <div class="one_title">6</div>
      <a class="button" href="#m_01">▲ メニューに戻る</a>
    </div>

  </div>
</section>

/*==============
固定ヘッダー
==============*/

.fixed_header {
  position: sticky;
  top: 0;
  z-index: 1;
}
.fixed_header h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  line-height: 2.0;
  padding: 0 .5em;
  height: 100px;
  margin: 3em 0 0;
  text-align: center;
  background: #e8dc6a;
}

/*==============
ページ内リンク
==============*/

.anchor_section {
  background: #f3efe6;
  padding: 120px 20px;
}
.anchor_section .inner {
  max-width: 1024px;
  margin: 0 auto;
}
.anchor_section .oneArea {
  margin-bottom: 200px;
}
.anchor_section ul.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 0 100px;
  padding: 0;
  box-sizing: border-box;
}
.anchor_section ul.list li {
  width: calc(100% / 6);
  text-align: center;
}
.anchor_section ul.list li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: #2b2a27;
  border-right: 1px solid #fff;
  transition: .3s;
}
.anchor_section ul.list li:last-child a {
  border-right: none;
}
.anchor_section ul.list li a:hover {
  color: #2b2a27;
  background: #fff;
}
.anchor_section .oneArea .one_title {
  color: #fff;
  text-align: center;
  padding: 10px;
  background: #2b2a27;
}
.anchor_section .oneArea a.button {
  display: block;
  font-size: 12px;
  color: #2b2a27;
  text-align: center;
  background: #fff;
  border: 1px solid #e8e3d8;
  padding: 10px;
  text-decoration: none;
  transition: .3s;
  margin-top: 40px;
}
.anchor_section .oneArea a.button:hover {
  background: #e8dc6a;
}

/* 動きを減らす設定のとき（jQuery の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .anchor_section ul.list li a,
  .anchor_section .oneArea a.button { transition: none; }
}

// ページ内リンク
$(function(){
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $('a[href^="#"]').on('click', function(){ // 通常のクリック時
    var href= $(this).attr("href"); // ページ内リンク先を取得
    var target = $(href);
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 500); // スクロール速度ミリ秒
    return false;
  });
});

/*==============
調整（固定ヘッダーの高さ 100px のぶん、上にずらす）
==============*/

#a_1, #a_2, #a_3, #a_4, #a_5, #a_6, #m_01 {
  padding-top: 100px;
  margin-top: -100px;
}