AngularJS - Using Bookmarks

Question

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:

index.html ...

    Choose:
    <a href="/view-1">View 1</a> |
    <a href="/view-2">View 2</a>

    <div class="view-animate-container">
      <div id="driver" ng-view class="view-animate" style="margin: 0; padding: 0; height: 100%;"></div>
      </div>
      <hr />
    </div>
</body>

view1.html

<div>
    <div style="position:fixed;">
        <h1>View 3</h1>
        <div>
            <a href="#sectionA">Section A</a> | <a href="#sectionB">Section B</a> | <a href="#sectionC">Section C</a>
        </div>
    </div><br /><br /><br /><br />

    <div style="overflow-y:scroll">
        <h2 id="sectionA">Section A</h2>
        <div style="background-color:navy; color:white;">
            Some text content goes here.
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            Yup.
        </div>

        <h2 id="sectionB">Section B</h2>
        <div style="background-color:red; color:white;">
            Some text content goes here.
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            Yup.
        </div>

        <h2 id="sectionC">Section C</h2>
        <div style="background-color:peachpuff; color:black;">
            Some text content goes here.
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            Yup.
        </div>
    </div>
</div>

main.js

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;
}

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?

Thank you!

Answer 1

I got the best and easy solution as:

Replace/Change the href="#bottom" link as /#/dashboard#bottom

/#/dashboard is the page where I (am currently)/want to scroll, and the #bottom is the anchor link.

I had tabs being flipped and using above method I couldn't solve the problem exactly the way I wanted. By the grace of God I got a tiny hacky solution for it :)

Answer 2

I was able to accomplish a similar behavior using a scrollTo function and replacing href with an ng-click tag calling it.

main.js

$scope.scrollTo = function(selector) {
    window.scrollTo(0, $(selector)[0].offsetTop - 100);
}

view1.html

<div>
  <a ng-click="scrollTo('#sectionA')">Section A</a> |
  <a ng-click="scrollTo('#sectionB')">Section B</a> |
  <a ng-click="scrollTo('#sectionC')">Section C</a>
</div>

<h2 id="sectionA">Section A</h2>
<div style="background-color:navy; color:white;">
    Some text content goes here.
</div>

<h2 id="sectionB">Section B</h2>
<div style="background-color:navy; color:white;">
    Some text content goes here.
</div>

<h2 id="sectionC">Section C</h2>
<div style="background-color:navy; color:white;">
    Some text content goes here.
</div>