CODEWITHSUNDEEP
javascripthtml
Franco
Franco

Reputation: 868

How to move to another page and then to a certain section of the page using a Javascript method

I have 3 files:

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

Upvotes: 0

Views: 791

Answers (2)

Sean
Sean

Reputation: 8032

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.

Upvotes: 1

dale landry
dale landry

Reputation: 8610

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();

}

Upvotes: 1

Related Questions