如何使用 Javascript 方法移动到另一个页面，然后移动到页面的某个部分

Question

I have 3 files:

• mainPage.html
• starter.html
• Landing.js

When I click on the div in starter.html I want to move to mainPage.html and then to the Menu section of this page

starter.html code:

<li> <div onclick="onBackToMenu()">Back to menu</div></li>

landing.js code:

function onBackToMenu() {
   window.location.href = "../mainPage.html";

   document.getElementById("Menu").scrollIntoView();

}

mainPage.html: (partial code)

<!--    Menu section -->
    <span class="anchor-offset" id="Menu"></span>
    <div class ="section" >
        
        <div class ="sectionHeadings">
            <h1>Menu/Products</h1>
            <div class="menu">
                
                <div class="starter" onclick="location.href='pages/starter.html';">
                    <h3 class="menu-heading starter-heading">Starters</h3>
                </div>

When I click on the div then it does take me to mainPage.html, but it doesnt want to take me to the Menu section with id of Menu.

Please help

Answer 1

Since you have an id on that section already ==> <span class="anchor-offset" id="Menu"></span> pass the id at the end of your href like this: window.location.href = "../mainPage.html#Menu"; this will a direct you to that section when the new page loads.

function onBackToMenu() {
   window.location.href = "../mainPage.html#Menu";

   document.getElementById("Menu").scrollIntoView();

}

Answer 2

No javascript is necessary. It's better practice and better for accessibility to use an anchor element ( <a> ) with an href element to create a hyperlink to the new page with a fragment identifier for the section you want to scroll to.

In your case, just change the list item in starter.html to:

<li><a href="../mainPage.html#Menu">Back to menu</a></li>

This will navigate a user to the menu section of the new page.