js实现锚点定位
程序员文章站
2022-07-01 18:56:10
...
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>
上一篇： 挂面热量高还是米饭，你一定想不到