AngularJs Scroll to Bottom
AngularJs Scroll to Bottom : There are many ways to scroll to the bottom of the page. You can use $anchorScroll and $location directives to scroll to the bottom of the page. Here in this tutorial we are going to explain how you can use this method to scroll to the bottom of the page. You can use out online editor to edit and run the code online.
AngularJs Scroll to Bottom
You can use the following method to scroll the bottom of the page.
AngularJs Scroll to Bottom Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope,$location, $anchorScroll) {
$scope.scrollToBottom = function() {
// set id of element you want to scroll
$location.hash('body');
$anchorScroll();
};
});
</script>
</head>
<body id="body">
<div ng-app="myApp">
<div ng-controller="myController" >
<input type="button" value="Scroll to Bottom" ng-click="scrollToBottom()">
</div>
</body>
</html>
|
In the above example we have created scrollToBottom() function in which we have used the service $location and $anchorScroll to scroll the bottom of the page.
If you run the above example it will produce output something like this –
Note : Make sure you have imported the $location, $anchorScroll directive in controller function.
Advertisements
