$anchorScroll not functioning properly

Question

On the click of a button i want the page to scroll a particular div bottom.

The 1st time i click, the page is going to the very top and the initial url http://localhost:8000 becomes http://localhost:8000/#/bottom(why is it not going to the div i mentioned).

The 2nd time i click the button, the url becomes http://localhost:8000/#/bottom#bottom and it goes to the div bottom(which is what i want).

How do i deal with this ?

code snippet

$location.hash('bottom');
$anchorScroll();

Thanks in advance

Do ask for more explanation if required . . .

maybe you use [ui-router](https://github.com/angular-ui/ui-router) and page re-render on hash change? — Philipp Andreychev, May 15 '15 at 08:07

score 0 · Answer 1 · edited May 23 '17 at 11:53

I don't know if you still need help, but have you checked this question?

Anyway, I also use one button to do a anchor scroll:

<button ng-click="app.gotoAnchor('destination')">GO!</button>
(...)
<div id="destination" style="height:1px;"></div>

And I just used a combination of AngularJS documentation examples and the SO question I mentioned before, to make this function:

function gotoAnchor(anchor){
      if ($location.hash() !== newHash) {
        // set the $location.hash to `newHash` and
        // $anchorScroll will automatically scroll to it
        $timeout(function() {
          $location.hash(anchor);
        });
      } else {
        // call $anchorScroll() explicitly,
        // since $location.hash hasn't changed
        $anchorScroll();
      }
    }

Being the $timeout call the one that made this work better.

Hope this helps.

score -3 · Answer 2 · answered May 15 '15 at 08:03

-3

<a href="#bottom">BOTTOM</a>
<div style="height:700px"> this is boby </div>
<a href="https://www.facebook.com/vietlink365" id="bottom">JOIN NOW!</a>

answered May 15 '15 at 08:03

Chau Phu Cuong

1
1

1

do keep some kind of explanation atleast – dreamer May 15 '15 at 08:04

$anchorScroll not functioning properly

2 Answers2