【完全版】ページ内リンクが反応しない！原因と解決策の総まとめ

<!-- リンクボタン -->
<ul>
    <li><a href="#section1">セクション 1</a></li>
    <li><a href="#section2">セクション 2</a></li>
    <li><a href="#section3">セクション 3</a></li>
</ul>

<!-- リンク先 -->

<!-- idに空白が入っている -->
<div id="section1 " class="section">
    <h3>セクション 1</h3>
</div>

<!-- idの所にクラスを書いちゃった -->
<div id="section2 section">
    <h3>セクション 2</h3>
</div>

<!-- そもそもid名間違えている -->
<div id="section_3" class="section">
    <h3>セクション 3</h3>
</div>

<!-- リンクボタン -->
<ul>
    <li><a href="#section">セクション 1</a></li>
</ul>

<!-- リンク先 -->
<div id="section" class="section">
    <h3>セクション</h3>
</div>

.
.
. ず～ッとしたの方にいくと
.
.

<!-- 全然関係ない別の場所で、idが銃風していた。 -->
<div id="section" class="section">
    <h3>セクション</h3>
</div>

<!-- リンクボタン -->
<ul class="link">
    <li><a href="#section">セクション 1</a></li>
</ul>

document.querySelector('.link a').addEventListener('click', function(e) {
    e.preventDefault(); // デフォルト動作の停止

    ～～～～
    
    // その他のイベント処理
});

<!-- リンクボタン -->
<ul class="link">
    <li><a href="#section">セクション 1</a></li>
</ul>

.link {
    pointer-events: none;
}

<div id="section" class="section">
    <h3>セクション</h3>
</div>

#section1 {
    display: none; /* または visibility: hidden; */
}