Unable to scroll to a div element using hash in Angular app

问题

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 ?

回答1:

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>

来源：https://stackoverflow.com/questions/44307824/unable-to-scroll-to-a-div-element-using-hash-in-angular-app