其中关于$location.hash();
例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6
#代表网页中的一个位置,#后边的部分就是该位置的标识符。浏览器读取这个URL后,会自动将div6位置滚动至可视区域。
详解见 http://www.ruanyifeng.com/blog/2011/03/url_hash.html
案例代码见下文。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>通过服务 $anchorScroll()和 $location.hash()实现锚点滚动 </title>
<style>
ul{ width: 80px;height: auto;position: fixed;top: 0;right: 10px;}
li{ height: 34px;line-height: 34px;text-align: center;border: 1px solid black;list-style: none;}
div{width: 600px; height: 330px; border: 1px solid black;margin-top: 10px;margin-left: 250px; background-color: #2f96b4;}
</style>
<script src="../js/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$location,$anchorScroll){
$scope.arr = [1,2,3,4,5,6];
$scope.change = function (id) {
$location.hash(id);
//例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6
//#代表网页中的一个位置。其右面的字符,#后边的部分就是该位置的标识符。浏览器读取这个URL后,会自动将div6位置滚动至可视区域。
//详解见 http://www.ruanyifeng.com/blog/2011/03/url_hash.html
$anchorScroll();
}
});
</script>
</head>
<body ng-controller="ctrl">
<ul>
<li ng-repeat="id in arr" ng-click="change('div'+id)">div{{id}}</li>
</ul>
<div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
</body>
</html>