Post
Ask Question

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

Introduction

In this article I will tell you how to apply "Go to Bottom" and "Go Up" on a click of Anchors in an application.

We often we create single page applications that are in great demand at the present time, in these applications you might need a functionality by which the user can go to a different part of a page just by clicking on the link and not by scrolling. To do this kind of functionality you can use AngularJS.

Now I will create an application that will help you to create such an application.

Step 1

First of all you need to add an external Angular.js file to your application, "angular.min.js".

For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="angular.min.js"></script>  
  4. </head> 
Step 2

Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.

  1. <html ng-app xmlns="http://www.w3.org/1999/xhtml"> 
Now I will create a simple application that will help you understand this feature.

First I will create a JavaScript function, this is the heart of this article. All the things will be described in this function.

  1. <script>  
  2.     function x($scope, $location, $anchorScroll) {  
  3.         $scope.goDown = function () {  
  4.             $location.hash('down');  
  5.             $anchorScroll();  
  6.         }  
  7.         $scope.goUp = function () {  
  8.             $location.hash('up');  
  9.             $anchorScroll();  
  10.         }  
  11.     }  
  12. </script> 
Here I have created a function named "x", but today in the function $location and $anchorScroll are also used along with $scope. $location service parses the browser address bar and make the URL available to your application.

Then I created a function that will help the user to go down just on the click of a link, this function is named "goDown". In this function a hash method is used with location, you can't change the "hash" method with any other variable name, it's fixed, in this has the method id of control that is passed to be followed on the click of the anchor.

Similarly I have created a function that will help the user to go up, here also the hash method is used and in this method the name of the control is passed that is to be followed when clicking the anchor.

Step 3

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

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div ng-app="App">  
  4.             <div id="div" ng-controller="x">  
  5.                 <div style="color:green;">  
  6.                     <a id="up" ng-click="goDown()">Go Down</a></div>  
  7.                 <div style="color:red;">  
  8.                     <a id="down" ng-click="goUp()">You're at the bottom</a></div>  
  9.             </div>  
  10.         </div>  
  11.     </form>  
  12. </body>
Here a div is bound to the function "x" using the ng-controller, in this div again two div are created. In both the div anchors are used, the first anchor is bound to the "goDown" function using the ng-click, the second anchor is also bound using the ng-click but it is bound to the goUp 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 to for execution.

Output

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

go to bottom using angularjs

You can see that only 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.

go to bottom using angularjs

Complete Code

The complete code of this application is as follows:

  1. <html ng-app xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="angular.min.js"></script>  
  5.     <script>  
  6.         function x($scope, $location, $anchorScroll) {  
  7.             $scope.goDown = function () {  
  8.                 $location.hash('down');  
  9.                 $anchorScroll();  
  10.             }  
  11.             $scope.goUp = function () {  
  12.                 $location.hash('up');  
  13.                 $anchorScroll();  
  14.             }  
  15.         }  
  16.     </script>  
  17.     <style>  
  18.         #div {  
  19.             height: 350px;  
  20.             overflow: auto;  
  21.         }  
  22.         #down {  
  23.             display: block;  
  24.             margin-top: 2000px;  
  25.         }  
  26.     </style>  
  27. </head>  
  28. <body>  
  29.     <form id="form1" runat="server">  
  30.         <div ng-app="App">  
  31.             <div id="div" ng-controller="x">  
  32.                 <div style="color:green;">  
  33.                     <a id="up" ng-click="goDown()">Go Down</a></div>  
  34.                 <div style="color:red;">  
  35.                     <a id="down" ng-click="goUp()">You're at the bottom</a></div>  
  36.             </div>  
  37.         </div>  
  38.     </form>  
  39. </body>  
  40. </html>


Similar Articles