Javascript:如何在同一页面( anchor )上导航而不重新加载自身

Question

我有一个大页面，有超过 6000 个 anchor ，例如 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:<button type="button" class="strongSuche">Go</button>无需任何额外的脚本来实现 prevnet 默认值等。请参阅 type在“属性”下:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button