どんな長文や画像のみでもスムーズにスクロールします。見本画面はWP上で重複動作していてスクロール動作やジャンプ先の位置がWPのヘッダーメニューに隠れて正確な動作が微妙ですが、単体のHTMLではスムーズに動作します。※画面の右下のボタン(ページの最後)はスクロール専用でWP用ではありません。

JSのスクロール関数がメインですので、その他のHTMLやCSSは参考までに。

スクロール動作

スクロール　１ スクロール　２ スクロール　３ スクロール　４ スクロール　５ スクロール　６ スクロール　７ スクロール　８ スクロール　９ スクロール１０

スクロール　１

本文--






--本文終わり

スクロール　２

本文--






--本文終わり

スクロール　３

本文--






--本文終わり

スクロール　４

本文--






--本文終わり

スクロール　５

本文--






--本文終わり

スクロール　６

本文--






--本文終わり

スクロール　７

本文--






--本文終わり

スクロール　８

本文--






--本文終わり

スクロール　９

本文--






--本文終わり

スクロール　１０

本文--






--本文終わり

HTML
<h1 id="title">スクロール</h1>

<!-- 記事ナビ -->
<div class="article-nav">
  <a href="#t01">スクロール　１</a>
  <a href="#t02">スクロール　２</a>
  <a href="#t03">スクロール　３</a>
  <a href="#t04">スクロール　４</a>
  <a href="#t05">スクロール　５</a>
  <a href="#t06">スクロール　６</a>
  <a href="#t07">スクロール　７</a>
  <a href="#t08">スクロール　８</a>
  <a href="#t09">スクロール　９</a>
  <a href="#t10">スクロール１０</a>
</div>

<main>

<!-- ▼ 記事テンプレート（本文なし） -->

<article id="t01">
  <h2>スクロール　１</h2>
  <p><p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p></p>
</article>

<article id="t02">
  <h2>スクロール　２</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t03">
  <h2>スクロール　３</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t04">
  <h2>スクロール　４</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t05">
  <h2>スクロール　５</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t06">
  <h2>スクロール　６</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t07">
  <h2>スクロール　７</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t08">
  <h2>スクロール　８</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t09">
  <h2>スクロール　９</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t10">
  <h2 >スクロール　１０</h2>
  <p > --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article

</main>

    <button id="jumpButton">ページの最後</button>

<footer id="bottomTarget">
  <a href="#title">TOP</a>
</footer>
CSS
    #title {
      text-align: center;
      font-size: 1.5rem;

    }

    .article-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.4rem;
      padding: 1rem;

    }

    .article-nav a {
      color: #ffffff;
      background: rgba(40, 26, 243, 0.877);
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      text-decoration: none;
      font-size: 0.85rem;
    }

    .article-nav a:hover {
      background-color: rgba(37, 37, 37, 0.226);
      color: #1a1919;
    }

    main {
      max-width: 900px;
      margin: 2rem auto;
      padding: 0 1rem;
    }

    article {
      background: rgba(240, 240, 240, 0.829);
      padding: 2rem;
      margin-bottom: 2.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(26, 25, 25, 0.651);
    }

    article h2 {
      font-size: 1.6rem;
    }

    footer {
      text-align: center;
    }

    footer a {
      text-decoration: none;
    }

    #jumpButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 6px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    font-size: 14px;
    z-index: 1000;
  }
JS
function smoothScrollTo(targetY, duration = 3000) {
  const startY = window.scrollY;
  const distance = targetY - startY;
  const startTime = performance.now();

  function loop(now) {
    const elapsed = now - startTime;
    const progress = Math.min(elapsed / duration, 1);

    const ease = progress < 0.5
      ? 2 * progress * progress
      : -1 + (4 - 2 * progress) * progress;

    window.scrollTo(0, startY + distance * ease);

    if (progress < 1) requestAnimationFrame(loop);
  }

  requestAnimationFrame(loop);
}

const jumpBtn = document.getElementById('jumpButton');
if (jumpBtn) {
  jumpBtn.addEventListener('click', () => {
    const target = document.getElementById('bottomTarget');
    if (!target) return;

    const targetY = target.getBoundingClientRect().top + window.scrollY;
    smoothScrollTo(targetY, 3000);
  });
}

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', e => {
    const href = link.getAttribute('href');

    if (href === '#') return;

    if (href.startsWith('#')) {
      e.preventDefault();

      const id = href.substring(1);
      const target = document.getElementById(id);
      if (!target) return;

      const targetY = target.getBoundingClientRect().top + window.scrollY;
      smoothScrollTo(targetY, 3000);
    }
  });
});
一括(HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロール</title>

<style>
    #title {
      text-align: center;
      font-size: 1.5rem;
    }

    .article-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.4rem;
      padding: 1rem;
    }

    .article-nav a {
      color: #ffffff;
      background: rgba(40, 26, 243, 0.877);
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      text-decoration: none;
      font-size: 0.85rem;
    }

    .article-nav a:hover {
      background-color: rgba(37, 37, 37, 0.226);
      color: #1a1919;
    }

    main {
      max-width: 900px;
      margin: 2rem auto;
      padding: 0 1rem;
    }

    article {
      background: rgba(240, 240, 240, 0.829);
      padding: 2rem;
      margin-bottom: 2.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(26, 25, 25, 0.651);
    }

    article h2 {
      font-size: 1.6rem;
    }

    footer {
      text-align: center;
    }

    footer a {
      text-decoration: none;
    }

    #jumpButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 6px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    font-size: 14px;
    z-index: 1000;
  }
</style>
</head>
<body>

<h1 id="title">スクロール</h1>

<div class="article-nav">
  <a href="#t01">スクロール　１</a>
  <a href="#t02">スクロール　２</a>
  <a href="#t03">スクロール　３</a>
  <a href="#t04">スクロール　４</a>
  <a href="#t05">スクロール　５</a>
  <a href="#t06">スクロール　６</a>
  <a href="#t07">スクロール　７</a>
  <a href="#t08">スクロール　８</a>
  <a href="#t09">スクロール　９</a>
  <a href="#t10">スクロール１０</a>
</div>

<main>

<article id="t01">
  <h2>スクロール　１</h2>
  <p><p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p></p>
</article>

<article id="t02">
  <h2>スクロール　２</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t03">
  <h2>スクロール　３</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t04">
  <h2>スクロール　４</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t05">
  <h2>スクロール　５</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t06">
  <h2>スクロール　６</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t07">
  <h2>スクロール　７</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t08">
  <h2>スクロール　８</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t09">
  <h2>スクロール　９</h2>
  <p> --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article>

<article id="t10">
  <h2 >スクロール　１０</h2>
  <p > --本文<BR><BR><BR><BR><BR><BR><BR>
    --本文終わり
  </p>
</article

</main>

    <button id="jumpButton">ページの最後</button>

<footer id="bottomTarget">
  <a href="#title">TOP</a>
</footer>
<script>

function smoothScrollTo(targetY, duration = 3000) {
  const startY = window.scrollY;
  const distance = targetY - startY;
  const startTime = performance.now();

  function loop(now) {
    const elapsed = now - startTime;
    const progress = Math.min(elapsed / duration, 1);

    const ease = progress < 0.5
      ? 2 * progress * progress
      : -1 + (4 - 2 * progress) * progress;

    window.scrollTo(0, startY + distance * ease);

    if (progress < 1) requestAnimationFrame(loop);
  }

  requestAnimationFrame(loop);
}

const jumpBtn = document.getElementById('jumpButton');
if (jumpBtn) {
  jumpBtn.addEventListener('click', () => {
    const target = document.getElementById('bottomTarget');
    if (!target) return;

    const targetY = target.getBoundingClientRect().top + window.scrollY;
    smoothScrollTo(targetY, 3000);
  });
}

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', e => {
    const href = link.getAttribute('href');

    if (href === '#') return;

    if (href.startsWith('#')) {
      e.preventDefault();

      const id = href.substring(1);
      const target = document.getElementById(id);
      if (!target) return;

      const targetY = target.getBoundingClientRect().top + window.scrollY;
      smoothScrollTo(targetY, 3000);
    }
  });
});

</script>
</body>
</html>