AngularJS $anchorScroll Service

The AngularJS $anchorScroll service can be used in conjunction with hyperlink in mark-up to automatically scroll to other part of the page. This service can be disabled by calling $anchorScrollProvider.disableAutoScrolling().

Syntax

$anchorScroll([hash]);

AngularJS $anchorScroll Service Example

<!DOCTYPE html>          
<html>          
<head> <!-- www.techstrikers.com -->          
<title>AngularJS $anchorScroll Example</title>          
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 
 <script>   
    var app = angular.module("AnchorScrollInitialization",[]); 
   app.controller("AnchorScrollController",['$location','$anchorScroll','$scope', function ($location,$anchorScroll,$scope){  
	$scope.moveTop = function()
	 {
		$location.hash('upLink'); 
		$anchorScroll();
	 }
	 $scope.moveDown = function()
	 {                           
		$location.hash('downLink'); 
		$anchorScroll();
	 }                                                                       
  }]);  
</script>          
</head>          
<body style="background-color:#DDE4E9;font-family:arial;" ng-app="AnchorScrollInitialization">          
  <fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS $anchorScroll Service Example</legend>            
<div ng-controller="AnchorScrollController">
  <a href="" id="upLink" ng-click="moveDown()">Go to down</a>
  <div style="height:1000px">
    <p style="font-family:Arial;color:yellow;
	background:steelblue;padding:3px;width:350px;">Down Link</p> 
  </div>
   <a href="" id="downLink" ng-click="moveTop()">Go to up</a>
    <p style="font-family:Arial;color:yellow;
	background:steelblue;padding:3px;width:350px;">Up Link</p>
    </div>  
      </fieldset>           
</body>          
</html>

See Live Example

« Previous