Apply "Go to Bottom" and "Go Up" on Click of Anchors

Step 3. Our work on the View is completed, and now I will work on the View Model of this application.

<body>
    <form id="form1" runat="server">
        <div ng-app="App">
            <div id="div" ng-controller="x">
                <div style="color: green;">
                    <a id="up" ng-click="goDown()">Go Down</a>
                </div>
                <div style="color: red;">
                    <a id="down" ng-click="goUp()">You're at the bottom</a>
                </div>
            </div>
        </div>
    </form>
</body>

Here a div is bound to the function "x" using the ng-controller, in this div again two divs are created. In both the div anchors are used, the first anchor is bound to the "goDown" function using the ng-click, and the second anchor is also bound using the ng-click but it is bound to the group function.

Some style is also applied to this application, this style will help to show the two anchors at a specific distance by which only one will be seen at a time and the second one will only be seen when the user clicks on the anchor.

Now, our application is created and is ready for execution.

Output

Now, if we run our application, then we will get output like this.

You can see that only one anchor can be seen at this time and in other words the first anchor, now if we click on the first anchor then our page will go down to the element that was called using the JavaScript function.

Complete Code

The complete code of this application is as follows.

<html ng-app xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
    <script src="angular.min.js"></script>  
    <script>  
        function x($scope, $location, $anchorScroll) {  
            $scope.goDown = function () {  
                $location.hash('down');  
                $anchorScroll();  
            }  
            $scope.goUp = function () {  
                $location.hash('up');  
                $anchorScroll();  
            }  
        }  
    </script>  
    <style>  
        #div {  
            height: 350px;  
            overflow: auto;  
        }  
        #down {  
            display: block;  
            margin-top: 2000px;  
        }  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div ng-app="App">  
            <div id="div" ng-controller="x">  
                <div style="color:green;">  
                    <a id="up" ng-click="goDown()">Go Down</a>  
                </div>  
                <div style="color:red;">  
                    <a id="down" ng-click="goUp()">You're at the bottom</a>  
                </div>  
            </div>  
        </div>  
    </form>  
</body>  
</html>