title: AngularJS - Using Bookmarks
body: <p>I'm trying to create an app with AngularJS. Currently, I have a a single view in my app. My app will have multiple views. At this time, my index.html file looks like the following:</p>
  
  <p><strong>index.html</strong>
      ...
      
          </p>
  
  <pre><code>    Choose:
      &lt;a href="/view-1"&gt;View 1&lt;/a&gt; |
      &lt;a href="/view-2"&gt;View 2&lt;/a&gt;
  
      &lt;div class="view-animate-container"&gt;
        &lt;div id="driver" ng-view class="view-animate" style="margin: 0; padding: 0; height: 100%;"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;hr /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>view1.html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;div style="position:fixed;"&gt;
          &lt;h1&gt;View 3&lt;/h1&gt;
          &lt;div&gt;
              &lt;a href="#sectionA"&gt;Section A&lt;/a&gt; | &lt;a href="#sectionB"&gt;Section B&lt;/a&gt; | &lt;a href="#sectionC"&gt;Section C&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
      &lt;div style="overflow-y:scroll"&gt;
          &lt;h2 id="sectionA"&gt;Section A&lt;/h2&gt;
          &lt;div style="background-color:navy; color:white;"&gt;
              Some text content goes here.
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              Yup.
          &lt;/div&gt;
  
          &lt;h2 id="sectionB"&gt;Section B&lt;/h2&gt;
          &lt;div style="background-color:red; color:white;"&gt;
              Some text content goes here.
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              Yup.
          &lt;/div&gt;
  
          &lt;h2 id="sectionC"&gt;Section C&lt;/h2&gt;
          &lt;div style="background-color:peachpuff; color:black;"&gt;
              Some text content goes here.
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              Yup.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>angular.module('myApp', ['ngRoute', 'ngAnimate'])
      .config(function ($routeProvider, $locationProvider) {
          $routeProvider.when('/view-1', {
              templateUrl: '/views/view1.html',
              controller: View1Ctrl
          });
  
          $routeProvider.when('/view-2', {
              templateUrl: '/views/view2.html',
              controller: View2Ctrl
          });
  
          // configure html5 to get links working on jsfiddle
          $locationProvider.html5Mode(true);
      })
  ;
  
  function View1Ctrl($scope, $routeParams) {
      this.name = "View1Cntl";
      this.params = $routeParams;
  }
  
  function View2Ctrl($scope, $routeParams) {
      this.name = "View2Cntl";
      this.params = $routeParams;
  }
  </code></pre>
  
  <p>I'm trying to get my bookmarks (anchor tags) working in view1. Whenever I click 'Section A', 'Section B', or 'Section C', the route gets updated. The view then re-animates into the screen. Finally, the view is positioned to the corresponding section. So the problem is that the view sort of re-loads. In reality, I just want to jump to the bookmark in the page when someone clicks it. How do I do this in AngularJS?</p>
  
  <p>Thank you!</p>