【JavaScript】特定の位置までスクロールしたら自動でページ遷移させる方法｜scrollY閾値・要素到達・IntersectionObserver・遅延遷移・UX配慮まで解説

window.addEventListener('scroll', () => {
  // ページ上部から500px スクロールしたら遷移
  if (window.scrollY >= 500) {
    window.location.href = 'https://example.com/next-page/';
  }
});

function setupScrollRedirect(threshold, url) {
  function onScroll() {
    if (window.scrollY >= threshold) {
      // リスナーを削除して以降は発火させない
      window.removeEventListener('scroll', onScroll);
      window.location.href = url;
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
}

// ページを500px スクロールしたら遷移
setupScrollRedirect(500, 'https://example.com/next-page/');

function setupBottomRedirect(url, marginPx = 100) {
  function onScroll() {
    const scrolled    = window.scrollY + window.innerHeight;
    const totalHeight = document.documentElement.scrollHeight;

    // 末尾から marginPx 以内に到達したら遷移
    if (scrolled >= totalHeight - marginPx) {
      window.removeEventListener('scroll', onScroll);
      window.location.href = url;
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
}

setupBottomRedirect('https://example.com/next-article/', 100);

/**
 * 指定した要素が画面内に入ったらページ遷移する
 * @param {string} selector  監視する要素のセレクター
 * @param {string} url       遷移先 URL
 * @param {number} threshold 0〜1（要素の何割が見えたら発火するか）
 */
function setupElementRedirect(selector, url, threshold = 0.5) {
  const target = document.querySelector(selector);
  if (!target) return;

  const observer = new IntersectionObserver((entries) => {
    const entry = entries[0];
    if (entry.isIntersecting) {
      observer.disconnect(); // 一度だけ発火して監視終了
      window.location.href = url;
    }
  }, { threshold });

  observer.observe(target);
}

// フッターが50%以上見えたら遷移
setupElementRedirect('#page-footer', 'https://example.com/next/', 0.5);

// 記事末尾の「次の記事へ」要素が完全に表示されたら遷移
setupElementRedirect('#next-article-trigger', 'https://example.com/article/2/', 1.0);

<!-- 遷移通知バナー（通常は非表示） -->
<div id="redirect-banner" hidden style="
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #1e40af; color: white;
  padding: 12px 20px; display: flex;
  justify-content: space-between; align-items: center;
  font-size: 14px; z-index: 9999;
">
  <span id="redirect-message">3秒後に次のページへ移動します…</span>
  <button id="cancel-redirect" style="
    background: white; color: #1e40af;
    border: none; padding: 6px 16px;
    border-radius: 4px; cursor: pointer; font-weight: bold;
  ">キャンセル</button>
</div>

/**
 * スクロールトリガー + カウントダウン + キャンセル可能な遷移
 */
function setupCountdownRedirect({ selector, url, delay = 3, threshold = 0.5 }) {
  const target  = document.querySelector(selector);
  const banner  = document.getElementById('redirect-banner');
  const message = document.getElementById('redirect-message');
  const cancelBtn = document.getElementById('cancel-redirect');

  if (!target || !banner) return;

  let timerId   = null;
  let cancelled = false;

  function startCountdown() {
    let remaining = delay;
    banner.hidden = false;
    message.textContent = `${remaining}秒後に次のページへ移動します…`;

    timerId = setInterval(() => {
      remaining--;
      if (remaining <= 0) {
        clearInterval(timerId);
        if (!cancelled) window.location.href = url;
      } else {
        message.textContent = `${remaining}秒後に次のページへ移動します…`;
      }
    }, 1000);
  }

  // キャンセルボタン
  cancelBtn.addEventListener('click', () => {
    cancelled = true;
    clearInterval(timerId);
    banner.hidden = true;
    observer.disconnect(); // 再発火させない
  });

  // IntersectionObserver で要素到達を監視
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      observer.disconnect();
      startCountdown();
    }
  }, { threshold });

  observer.observe(target);
}

// 使用例
setupCountdownRedirect({
  selector:  '#article-end',
  url:       'https://example.com/next-article/',
  delay:     5,       // 5秒後に遷移
  threshold: 0.8,
});

// ① location.href（推奨）
// 履歴に残るので「戻る」ボタンで元ページに戻れる
window.location.href = 'https://example.com/next/';

// ② location.replace
// 履歴に残らない。「戻る」で元ページには戻れない
// 自動ログインリダイレクトなど「戻られたくない」場合に使う
window.location.replace('https://example.com/next/');

// ③ history.pushState（SPA用）
// URL は変わるがページ遷移しない。SPA でのルーティングに使う
history.pushState({}, '', '/next-page');

/**
 * スクロール量のパーセントでリダイレクトをトリガー
 * @param {number} percent 0〜100（例: 80 = 80%スクロールしたら）
 * @param {string} url     遷移先 URL
 */
function setupPercentRedirect(percent, url) {
  function onScroll() {
    const scrolled = window.scrollY + window.innerHeight;
    const total    = document.documentElement.scrollHeight;
    const ratio    = (scrolled / total) * 100;

    if (ratio >= percent) {
      window.removeEventListener('scroll', onScroll);
      window.location.href = url;
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
}

// ページの80%をスクロールしたら遷移
setupPercentRedirect(80, 'https://example.com/next/');

function debounce(fn, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}

const checkScroll = debounce(() => {
  if (window.scrollY >= 500) {
    window.location.href = 'https://example.com/next/';
  }
}, 50); // 50ms ごとに1回だけ実行

window.addEventListener('scroll', checkScroll, { passive: true });