Javascript: How to navigate on the same page (anchor) without reloading itself

Question

I have a big page with over 6000 anchors like id="#0000001". to navigate I added a small search form, fixed to the top right corner and use JS to switch location on the document. After each search, the hole page will reload (around 4,5MB). I would like to navigate/scroll up and down without reloading. The same as it works clicking to the simple but long link-list.

It must also work offline so HTML, CSS and JS must be in the same document.

solution code (7.5.2020) thanks to all, it works with this code. I also changed <form> to <div>

used form:

    <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>

the hole JS (search start by keypress-'ENTER' or click the button:

<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>

and the long link list with 6020 entries (to replace):

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

Sounds like you need to prevent the default behavior of the form. — ellitt, Apr 02 '20 at 21:24
You must intercept the Form submit and then you can read the value from the input field withou make a http request to the server https://stackoverflow.com/questions/5384712/capture-a-form-submit-in-javascript — Marc, Apr 02 '20 at 21:27

score 1 · Answer 1 · edited Apr 02 '20 at 21:52

1

Since buttons default behavior inside form is to submit the form, you can set the button's type to button: <button type="button" class="strongSuche">Go</button> without any additional scripting to prevnet default etc. See type under "Attributes": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

edited Apr 02 '20 at 21:52

R Greenstreet

719
6
21

answered Apr 02 '20 at 21:38

A. Meshu

4,053
2
20
34

R Greenstreet · Answer 2 · 2020-04-02T21:33:49.627

I think you'll want to first preventDefault the button click/form submission event:

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

If you want to avoid the possibility of page refresh altogether, this could be another solution (though it would still take some scrolling):

    <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>

HE thanks for advice. I tried it and added modified script in the question. It looks that the function 'geheZuStrong()' together with window.location.hash starts reload the page. Enter and click does not start reload before this function. (Is there any other possibility to move on the page?) — user13203466, Apr 05 '20 at 10:44

Javascript: How to navigate on the same page (anchor) without reloading itself

2 Answers2