url#以降を非表示

ページ内リンクで遷移した時、urlのハッシュ（#）以降を表示させない方法

JavaScript

event.preventDefault() でaタグの動作（#xxxを追加）を防ぐ
history.replaceState()でURLからハッシュを削除

HTML

<div class="oh">
  <ul id="oh_top">
    <li><a href="#link1" onclick="scrollToAnchor(event, 'link1')">リンク1</a></li>
    <li><a href="#link2" onclick="scrollToAnchor(event, 'link2')">リンク2</a></li>
    <li><a href="#link3" onclick="scrollToAnchor(event, 'link3')">リンク3</a></li>
    <li><a href="#link4" onclick="scrollToAnchor(event, 'link4')">リンク4</a></li>
  </ul>

    <div id="link1">
      <p>リンク1 エリア</p>
    </div>
    <div id="link2">
      <p>リンク2 エリア</p>
    </div>
    <div id="link3">
      <p>リンク3 エリア</p>
    </div>
    <div id="link4">
      <p>リンク4 エリア</p>
    </div>
  </div>

JavaScript

<script>
 function scrollToAnchor(event, id) {
   event.preventDefault();
   const element = document.getElementById(id);
   if (element) {
element.scrollIntoView({ behavior: "smooth" });
history.replaceState(null, null, location.pathname);
   }
 }
</script>

jQuery版

aタグではなく他のタグ（liなど）を使ってaタグの動作（#xxxを追加）を防ぐ

HTML

<div class="oh">
 <ul id="oh2_top">
   <li id="link1p">リンク1</li>
   <li id="link2p">リンク2</li>
   <li id="link3p">リンク3</li>
   <li id="link4p">リンク4</li>
 </ul>

 <div class="link_wrap">
   <div id="link1point">
<p>リンク1 エリア</p>
   </div>
   <div id="link2point">
<p>リンク2 エリア</p>
   </div>
   <div id="link3point">
<p>リンク3 エリア</p>
   </div>
   <div id="link4point">
<p>リンク4 エリア</p>
   </div>
 </div>
</div>

JavaScript

<script>
  function linkscroll(target) {
    $("html, body").animate({ scrollTop: $(target).offset().top }, "swing");
  }
  $("#link1p").click(function () {
    linkscroll("#link1point");
  });
  $("#link2p").click(function () {
    linkscroll("#link2point");
  });
  $("#link3p").click(function () {
    linkscroll("#link3point");
  });
  $("#link4p").click(function () {
    linkscroll("#link4point");
  });
</script>