0

I have read here and here that a page can be scrolled to a specific element using just a hash selector and a id attr.

But for some reasons I am unable to do it in my Angular application. Can this be due to the usage of routing (angular-ui-router) in my app.

What I am trying to do is moving to a specific section of one of my page, which by the way are loaded in to a state using routing.

I have :

        <div class="nav_panel">
         <a class="nav_links" href="#footer">Footer</a>
       </div>

and

<div class="homeFooter" id="footer">
        <div class="social_icons">
            <span class="gplus"></span>
            <span class="fb"></span>
            <span class="twitter"></span>
            <span class="whatsapp"></span>
            <span class="youtube"></span>
        </div>
</div>

on the same template.

Is there a way I can make it work with routing (if at all that matters) as well or am I doing something wrong here ?

Community
  • 1
  • 1
Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82
  • Did you try ```ngHref="#footer``` ? – Zooly Jun 01 '17 at 12:42
  • Can you post more of your code? This should work in principle the way you have done it, but if it's not working then perhaps something else is obstructing it. As for the smooth scrolling, I assume you've got that JS code applied too? Finally, the first link you supplied seems to be related to a different topic. – webbm Jun 01 '17 at 12:47
  • @Zooly No I dint try ngHref yet. Will check that out soon and update – Saurabh Tiwari Jun 01 '17 at 13:15
  • @webbm Sorry for the wrong link. I have corrected that. This is out of a page in a huge application. I will try to post a fiddle if possible – Saurabh Tiwari Jun 01 '17 at 13:16
  • @Zooly `ng-href` made no difference other than that now I see `ng-href` in my DOM alongside regular `href` tag – Saurabh Tiwari Jun 01 '17 at 15:19
  • It seems that `````` is working – Zooly Jun 01 '17 at 15:26
  • @Zooly I gave it a try and it really seem to be working. Have to see that in detail. By the way, did you find it documented somewhere or any links. – Saurabh Tiwari Jun 01 '17 at 15:43
  • I totaly missed to quote the link concerning my answer ! I used it some weeks ago, and I did find this : https://stackoverflow.com/a/18373005/4781975 I'm writing an answer, hope it will work for you :) – Zooly Jun 01 '17 at 17:04

1 Answers1

0

Based on this answer, you can add the _targetattribute to the <a>tag.

For your need, value on _target is self. It's an attribute compatible with all recent browser, that will redirect you to the link in the same frame as the user click (useful for SPA e.g.)

<a href="#footer" target="_self">Go to the footer</a>


<div id="footer">Welcome to the footer</div>
Zooly
  • 4,736
  • 4
  • 34
  • 54