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

【问题标题】：Javascript: How to navigate on the same page (anchor) without reloading itselfJavascript：如何在同一页面（锚点）上导航而不重新加载自身
【发布时间】：2020-07-14 23:58:50
【问题描述】：

我有一个包含 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（通过keypress-'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> -

【问题讨论】：

听起来你需要阻止表单的默认行为。
您必须拦截表单提交，然后您可以从输入字段中读取值，而无需向服务器发出http请求stackoverflow.com/questions/5384712/…

标签： javascript html

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

他感谢您的建议。我尝试了它并在问题中添加了修改后的脚本。看起来函数 'geheZuStrong()' 和 window.location.hash 一起开始重新加载页面。在此功能之前输入并单击不会开始重新加载。（有没有其他可能在页面上移动？）