Anchor in Angularjs

Question

Hello, I need to create an anchor where when I click on a link it arrow display block in a hidden div and scroll down the page to that div. The part about display block I’ve done, what I need is the part where I click on the link and the page goes down. I’m using Angular, so I can’t use #id_div for this. Does anyone have any idea?

Answer 1

Hello, I managed to solve this problem as follows: in the link, I put a scrollTo with the id of the div that it should go:

<a href="" ng-click="vm.scrollTo('box')">

in the div I put his normal id right:

<div id="box" class="col-md-12">

Already in the controller of my page, it is necessary to put a function to scroll down, which in my case was:

vm.scrollTo = function (id) {
        setTimeout(function() {
            $location.hash(id);
            $anchorScroll();
        }, 100);
    };

I put the set timeout because I happen to have to click 2 or 3 times on the link to get it to scroll down the page, so the bug is solved

Answer 2

You can use a target="_self" in his href. This will prevent action on the part of angularjs:

<a href="#teste" target="_self"></a>
<div id="teste"></div>