Angular关于$anchorScroll的定位滚动

时间:2023-03-09 07:47:39
Angular关于$anchorScroll的定位滚动

以下是实现定位滚动的代码:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>定位滚动</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 200px;
height: auto;
position: fixed;
top: 10px;
right: 0;
}
li{
height: 34px;
line-height: 34px;
text-align: center;
border: 1px solid black;
list-style: none;
}
div{
width: 200px;
height: 330px;
border: 1px solid black;
margin-top: 10px;
}
</style>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$location,$anchorScroll){
$scope.arr = [1,2,3,4,5,6];
$scope.show = function (id) {
$location.hash(id);
$anchorScroll();
}
});
</script>
</head>
<body ng-controller="ctrl">
<ul>
<li ng-repeat="id in arr" ng-click="show('div'+id)">div{{id}}</li>
</ul>
<div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
</body>
</html>