CODEWITHSUNDEEP
htmlnavigationanchor
Mikhail Ladonkin
Mikhail Ladonkin

Reputation: 155

Navigating from another page to the anchored links

Good evening everyone,

I’ve got a dilemma which I can’t solve on my own. I have a webpage with two pages. The menu contains 5 elements 4 of which are navigated to via anchors, and another one is the second page. The problem appears when I’m trying to go from this second page to some menu element which is anchored and hence not accessible. The anchored navigation works perfectly if I’m on the first page where these anchors are. How can I solve this issue? Hope someone can help me!

UPDATE: added the code, hope my problem is more clear now.

<div class="col-md-auto">
  <button class="top-menu-hamburger"><i class="fas fa-bars"></i></button>
  <ul class="top-nav-menu" id="top-nav-menu">
    <!-- 1st page -->
    <li><a href="website.com#about-us">About Us</a></li>
    <li><a href="website.com#course">Course</a></li>
    <!-- 2nd page -->
    <li><a href="website.com/our-blog/">Our Blog</a></li>
  </ul>
</div>
<!-- 1st page -->
<div id="about-us_header">
  <h2 class="about-us" class="font-size:2.0rem">We believe that it is necessary not only to READ about your teacher, but to HEAR him as well.</h2>
</div>
<div id="course">
  <h2 class="course-text" class="font-size:2.0rem">We believe that it is necessary not only to READ about your teacher, but to HEAR him as well.</h2>
</div>

Upvotes: 0

Views: 40

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

Navigation to a specific location in a page works because the destinations need to have id attributes set up on them and the links that navigate need to include #ID (where ID is replaced with the actual value of the id attribute you've already set up at the destination). To be able to move between pages in both directions, each page would need to have elements with ids established at the destination points and each page would need links pre-configured to go to those destinations on the other page.

For example:

Page1.html

<p id="page1destination">Some good stuff here</p>
<a href="page2.html#page2desination">Go to pre-confiured spot on page 2</a>

Page2.html

<p id="page2destination">Some good stuff here</p>
<a href="page1.html#page1desination">Go to pre-confiured spot on page 1</a>

Upvotes: 1

Related Questions