How to navigate to a particular section in same page?

Question

I have a modal popup where I have different sections. Based on whatever section user clicks, that section's info should come up.

I have something like this-

<div id="one">
  <h1>One</h1>
  <p>Section One</p>
</div>    
<div id="two">
  <h1>Two</h1>
  <p>Section Two</p>
</div>

And later in the form I have the links like-

         <ul>
           <li><a href="#one">One</a></li>
           <li><a href="#two">Two</a></li>
         </ul>

As soon as I click on the link it redirects me to the root(default) of the homepage rather than this particular section.

I'm using Angular 14. Can anyone help me with this?

Edit: I tried this solution and it worked for me. Here's the link.

Does this answer your question? [How to call scrollIntoView on an element in angular 2+](https://stackoverflow.com/questions/47616843/how-to-call-scrollintoview-on-an-element-in-angular-2) — Naren Murali, Sep 05 '22 at 12:05
try this - https://stackoverflow.com/questions/48277721/angular-how-to-make-link-to-jump-for-certain-section-in-the-same-page — Eli Porush, Sep 05 '22 at 12:45
Does this answer your question? [angular: how to make link to jump for certain section in the same page](https://stackoverflow.com/questions/48277721/angular-how-to-make-link-to-jump-for-certain-section-in-the-same-page) — Rohit Gupta, Sep 05 '22 at 14:01
@NarenMurali yeah I had already tried this. It didn't work for me. I t was still behaving the same as earlier i.e. going to the root page. — 474gaurav, Sep 05 '22 at 15:56
@EliPorush yeah i tried this, but it doesn't seem to be working for me. — 474gaurav, Sep 05 '22 at 15:57
@RohitGupta yeah this is the same thing the other comment said to try. It didn't work for me. — 474gaurav, Sep 05 '22 at 15:57
In that case, you have probably not posted enough of your code. # is the most trivial of things to get working. — Rohit Gupta, Sep 05 '22 at 21:56

Rohit Gupta · Answer 1 · 2022-09-05T23:13:13.240

Try this

<html>

<body>
  <div id="one">
    <h1>One</h1>
    <p>Section One</p>
  </div>
  <div id="two">
    <h1>Two</h1>
    <p>Section Two</p>
  </div>
  later in the form

  <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
  </ul>

  <style>
    h1 {
      color: blue
    }
    
    div:target {
      color: red;
      background-color: yellow
    }
  </style>
</body>

</html>

Just to show that the style syntax is correct and working, h1 text is coloured blue.

The :target specifies that when a div is the target of the #, text colour is red and the background is yellow.

How to navigate to a particular section in same page?

1 Answers1