Chapter 19, $anchorScroll (Pro AngularJS)

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<body ng-app="exampleApp" ng-controller="defaultCtrl">
    <div class="panel panel-default">
        
<h4 class="panel-heading">URL</h4>

        <div class="panel-body">
            <p id="top">This is the top</p>
            <button class="btn btn-primary" ng-click="show('bottom')">Go to Bottom</button>
            <p>
                <ul>
                    <li ng-repeat="item in items">{{item}}</li>
                </ul>
            </p>
            <p id="bottom">This is the bottom</p>
            <button class="btn btn-primary" ng-click="show('top')">Go to Top</button>
        </div>
    </div>
</body>

JavaScript

var exampleApp = angular.module("exampleApp", [])


exampleApp.config(function ($anchorScrollProvider) {
    $anchorScrollProvider.disableAutoScrolling();
})

exampleApp.controller("defaultCtrl", function ($scope, $location, $anchorScroll) {
    $scope.itemCount = 50;
    $scope.items = [];
    for (var i = 0; i < $scope.itemCount; i++) {
        $scope.items[i] = "Item " + i;
    }
    $scope.show = function (id) {
        $location.hash(id);
        if (id == "top") {
            $anchorScroll();
        }
    }
});