Javascript：如何在同一页面（锚）上导航而不重新加载自身

Question

我有一个大页面，其中包含 6000 多个锚点，例如id="#0000001" 。 为了导航，我添加了一个小的搜索表单，固定在右上角并使用 JS 在文档上切换位置。 每次搜索后，漏洞页面将重新加载（大约 4.5MB）。 我想在不重新加载的情况下向上和向下导航/滚动。 与单击简单但很长的链接列表相同。

它还必须脱机工作，因此 HTML、CSS 和 JS 必须在同一个文档中。

解决方案代码（7.5.2020）感谢大家，它适用于此代码。 我也将<form>更改为<div>

使用形式：

    <div id="suchForm" class="hide_on_print">
        <input id="eingabeNr" name="suchFeld" type="text" size="10" value=""> 
        <button type="button" class="strongSuche" id="strongSucheID">🔎</button>
    </div>

孔JS（通过按键搜索开始-'ENTER'或单击按钮：

<script> 
    window.addEventListener("load", function() {

            //  press "Enter" in the search field starts searching Strong 
            document.getElementById("eingabeNr").addEventListener('keypress',  (e) => {
                if(e.keyCode == 13){
                    //alert("You pressed \'Enter\'-Key.");
                    geheZuStrong();
                }
            });

            //  "Click" Button starts Strong search 
            document.getElementById('strongSucheID').addEventListener('click', (e) => {
                e.preventDefault();
                //alert("You pressed search button"".);
                geheZuStrong();
            }); 

            //  "creates" an ancor and move to it
            function geheZuStrong() {
                //alert("function: \'geheZuStrong\' running now");
                let gesNr = document.getElementById("eingabeNr").value;

                    switch(gesNr.length) {
                        case (1):
                            window.location.hash = "#000000" + gesNr;
                            break;
                        case (2):
                            window.location.hash = "#00000" + gesNr;
                            break;
                        case (3):
                            window.location.hash = "#0000" + gesNr;
                            break;
                        case (4):
                            window.location.hash = "#000" + gesNr;
                            break;
                        default:
                            // Anweisungsblock alternativ
                            alert('Strong Nummern sind im Bereich 1 bis 6020. Ihre Eingabe war: ' + strongLänge);
                    }
            }
    }, false);
</script>

以及带有 6020 个条目的长链接列表（要替换）：

<a href="#0000001">1</a> -
<a href="#0000002">2</a> -
...
<a href="#0006020">6020</a> -

Answer 1

由于form内的按钮默认行为是提交表单，因此您可以将按钮的类型设置为按钮： <button type="button" class="strongSuche">Go</button>无需任何额外的脚本来阻止默认设置等。请参阅type在“属性”下： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 2

我认为您首先要防止preventDefault按钮单击/表单提交事件：

document.querySelector('#suchForm').addEventListener('submit', (e) => {
    e.preventDefault();
    //from there, run your scroll:
    let gesNr = document.getElementById("eingabeNr").value;
    window.location.hash = "#00" + gesNr;
});

如果您想完全避免页面刷新的可能性，这可能是另一种解决方案（尽管仍需要一些滚动）：

    <html>
        <body>
            <select id="navigation" name="navigation">
                <option value="1">Go to Section 1</option>
                <option value="2">Go to Section 2</option>
                <option value="3">Go to Section 3</option>
                ....
                <option value="6020">6020</option>
            </select>
                <h1 id="001">Section 1</h1>
                <h1 id="002">Section 2</h1>
                <h1 id="003">Section 3</h1>
                ...
                <h1 id="006020">Section 6020</h1>
        </body>
        <script>
            document.querySelector('#navigation').addEventListener('change', (e) => {
                let gesNr = this.value;
                window.location.hash = "#00" + gesNr;
            });

        </script>
    </html>