When you want to scroll to some position in Single page, You can use angularJS solution known as anchoring.using $anchorScroll service or you can use traditional scrolling using window.scrollTo method.
When you use $anchorScroll, it scrolls to the element related to the specified hash or HTML element ID or current value of the $location.hash().
This also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes.
$anchorScroll([hash]);
Here, hash specifies to the HTML element id to scroll to.
It is having one attribute yOffset, it specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navigation menus, headers etc.
Example of Normal anchoring:
Index.html
<div id="scrollTutorial" style="height: 500px; overflow: auto;" ng-controller="ScrollTutorialController"> <a ng-click="gotoFooterOfThePage()">This is Top element, Go to Footer! </a> <div id="footer" style="display: block; margin-top: 2000px;"> Welcome to bottom of the page!</div>
ScrollTutorialController.js
angular.module('anchorScrollTutorialApp', []) .controller('ScrollTutorialController', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) { $scope.gotoFooterOfThePage = function() { // set the location.hash to the id of the element you wish to scroll to. $location.hash('footer'); // call $anchorScroll() $anchorScroll(); }; }]);
Example of scroll using yOffset :
Home.html
<div id="app-menu" ng-controller="myAppCtrl" style="background-color: grey; height: 25px; position: fixed; top: 0; left: 0; right: 0;"> <a href="" ng-click="gotoSection(x)" ng-repeat="x in [1,2,3]"> Go to Section {{x}} </a> <div id="section{{x}}" ng-repeat="x in [1,2,3]" style="border: 5px dashed blue; padding: 10px 10px 500px 10px;" > Section {{x}} of 5</div> </div>
AppCtrl.js
angular.module('myAnchorScrollOffsetTutorial', []) .run(['$anchorScroll', function($anchorScroll) { $anchorScroll.yOffset = 25; // always scroll by 25 extra pixels }]) .controller('myAppCtrl', ['$anchorScroll', '$location', '$scope', function($anchorScroll, $location, $scope) { $scope.gotoSection = function(x) { var newHash = 'anchor' + x; // set the $location.hash to `newHash` and $anchorScroll will scroll to it $location.hash(newHash); // call $anchorScroll() to go to the new HTML element selected $anchorScroll(); }; }]);
If you don’t want to modify yOffset attribute across the application you can use alternative i.e. using $window just after $anchorScroll.
$window.scroll($window.scrollX, $window.scrollY - offset);
$anchorScroll also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes.
This can be disabled by calling $anchorScrollProvider.disableAutoScrolling().