Studioでアンカーリンクの移動が滑らかになるようにする方法

ノーコードツールStudioの有料プランでのみ利用可能な、カスタムコードを使用したアンカーリンクの移動を滑らかになるようにする方法。

手順

Studioのカスタムコードに以下を追加

<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});
</script>

これでアンカーリンクがすべてスムーズに動作します。

なお、プレビュー上では動作確認ができないため、確認には公開が必要です。

公開を避けたい場合は、noindexにチェックを入れて検索エンジンにクロールされない状態で一時公開し、動作確認を行ってください。