Angularjs - navigating to a specific div via manually entering url into address bar

Question

Lets say I have two divs on an index page:

<div id="divA"></div>
<div id="divB"></div>

Using Angular (assuming through routing), is there a way to manually enter a url (in the address bar) that navigates to that specific div on said page.

http://website.com/divA
http://website.com/divB

I've come across ways of doing it through anchor tags, but I've been tasked to figure out a way to do it when a user enters a specific url in the address bar. If anyone can explain a potential solution, I'd appreciate the insight.

Do you need any animation whatsoever to scroll to the div location? — Simon Paquet, Oct 02 '14 at 21:20
have you looked at this answer : http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs — Simon Paquet, Oct 02 '14 at 21:28
I scanned it just now, it looks like it doesn't offer a solution for manually entering an address into the address bar to navigate to a specific div. — Rex_C, Oct 02 '14 at 21:35

Simon Paquet · Answer 1 · 2014-10-02T21:44:08.780

I will assume that you use AngularJS's routes as pages.

A good thing to do would be to trigger an action once your page controller is called to trigger an action based on the current location. You can use $anchorScroll() (doc here)

Once you found the location you are in, inscted of using ng-click, you simply call the function :

<div id="scrollArea" ng-controller="ScrollController">
  <a id="middle"></a> You are in /divA
  <a id="bottom"></a> You are in /divB
</div>

And the javascript :

  app.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
    function ($scope, $location, $anchorScroll) {
        if($location.path() == "/divA"){
            $location.hash('middle');
         }
        else if($location.path() == "/divB"){
            $location.hash('bottom');
        }
        // call $anchorScroll()
        $anchorScroll();
    }]);

Angularjs - navigating to a specific div via manually entering url into address bar

1 Answers1