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
[code language=”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>
[/code]
ScrollTutorialController.js
[code language=”javascript”]
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(); };
}]);
[/code]
Example of scroll using yOffset :
Home.html
[code languaue=”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>
[/code]
AppCtrl.js
[code language=”javascript”]
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();
};
}]);
[/code]
If you don’t want to modify yOffset attribute across the application you can use alternative i.e. using $window just after $anchorScroll.
[code language=”javascript”]
$window.scroll($window.scrollX, $window.scrollY – offset);
[/code]
$anchorScroll also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes.
This can be disabled by calling $anchorScrollProvider.disableAutoScrolling().