こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、当たり前すぎてど忘れしていたページ内リンクを紹介します！
何を今更と思われるかもしれませんが、
WEBサイトには必須のtipsなのでリマンドしておきましょう！

実装例

HTML例

<div class="link-button">
	<div><a href="#link5">link5</a></div>
	<div><a href="#link4">link4</a></div>
	<div><a href="#link3">link3</a></div>
	<div><a href="#link2">link2</a></div>
	<div><a href="#link1">link1</a></div>
</div>
<div class="link-target" id="link5">link5</div>
<div class="link-target" id="link4">link4</div>
<div class="link-target" id="link3">link3</div>
<div class="link-target" id="link2">link2</div>
<div class="link-target" id="link1">link1</div>

CSS例

  .link-button{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 60px;
  }
  .link-button div{
    margin: 5px;
  }
  .link-button div a{
    display: flex;
    padding: 10px 30px 10px 15px;
    justify-content: center;
    align-items: center;
    background-color: #01b546;
    color: #fff;
    border-radius: 20px;
    transition: .4s;
    position: relative;
  }
  .link-button div a::after{
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    transition: .4s;
  }
  .link-button div a:hover{
    opacity: 0.7;
  }
  .link-button div a:hover::after{
    top: 20px;
  }
  .link-target{
	font-size: 24px;
	margin: 0 0 1000px;
  }

JavaScript例

document.addEventListener('click', function(e) {
  const link = e.target.closest('a[href^="#"]');
  if (!link) return;
  const href = link.getAttribute('href');
  const target = document.querySelector(
    href === '#' || href === '' ? 'html' : href
  );
  if (!target) return;
  e.preventDefault();
  const position = target.getBoundingClientRect().top + window.pageYOffset;
  window.scrollTo({
    top: position,
    behavior: 'smooth'
  });
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！