js实现锚点定位

js实现锚点定位的原理是，算出定位的标签距离顶部的高度，点击触发标签，重新赋值滚动条的高度到达指定位置。
<!DOCTYPE html>
<html>
<head>
<title>letter.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="../standard/plugins/bootstrap/css/bootstrap.css" type="text/css"></link>
</head>

<body ng-app="letter_App" ng-controller="letter_Ctrl">
	<div>
		<span>索引:</span> <span ng-click="btn_letter_onclick('A')" >A</span> <span
			ng-click="btn_letter_onclick('B')">B</span> <span
			ng-click="btn_letter_onclick('C')">C</span> <span
			ng-click="btn_letter_onclick('D')">D</span> <span
			ng-click="btn_letter_onclick('E')">E</span> <span
			ng-click="btn_letter_onclick('F')">F</span> <span
			ng-click="btn_letter_onclick('G')">G</span> <span
			ng-click="btn_letter_onclick('H')">H</span> <span
			ng-click="btn_letter_onclick('I')">I</span> <span
			ng-click="btn_letter_onclick('J')">J</span> <span
			ng-click="btn_letter_onclick('K')">K</span> <span
			ng-click="btn_letter_onclick('L')">L</span> <span
			ng-click="btn_letter_onclick('M')">M</span> <span
			ng-click="btn_letter_onclick('N')">N</span> <span
			ng-click="btn_letter_onclick('O')">O</span> <span
			ng-click="btn_letter_onclick('P')">P</span> <span
			ng-click="btn_letter_onclick('Q')">Q</span> <span
			ng-click="btn_letter_onclick('R')">R</span> <span
			ng-click="btn_letter_onclick('S')">S</span> <span
			ng-click="btn_letter_onclick('T')">T</span> <span
			ng-click="btn_letter_onclick('U')">U</span> <span
			ng-click="btn_letter_onclick('V')">V</span> <span
			ng-click="btn_letter_onclick('W')">W</span> <span
			ng-click="btn_letter_onclick('X')">X</span> <span
			ng-click="btn_letter_onclick('Y')">Y</span> <span
			ng-click="btn_letter_onclick('Z')">Z</span> <span
			ng-click="btn_letter_onclick('other')">其他</span>
	</div>
	<div style="height: 800px;">定位</div>
	<div class="z_A">A</div>
</body>
<script type="text/javascript"
	src="../standard/plugins/angular/angular.js"></script>
<script type="text/javascript"
	src="../standard/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
	var letter_App = angular.module("letter_App", []);
	letter_App.controller("letter_Ctrl", function($scope, $http) {
		$scope.btn_letter_onclick = function(letter) {
			$(document).scrollTop($('.z_' + letter).offset().top);
		};
	});
</script>
</html>
猜你喜欢
