angularJS-实现锚点跳转实例

来源：互联网发布：蓝月传奇轮回系统数据编辑：程序博客网时间：2024/05/16 09:42
<!DOCTYPE html><html ng-app = "myPro"><head><meta charset="UTF-8"><title>angularJS_实现锚点跳转实例</title><script src="js/angular.min.js"></script><script src="js/jquery-1.11.0.js"></script><style>*{padding: 0;margin: 0;}ul,ol{list-style: none;}body{background-color: #414246;}::-webkit-scrollbar{width: 7px;height: 4px;}::-webkit-scrollbar-track{border-radius:0 ;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.1);}::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}.box{width: 800px;height: 500px;border: 1px solid #000000;margin: 100px auto;background-color: #373a3f;color: #a1a6a7;font-size: 12px;}.box .box-header{width: 790px;height:40px;border: 1px solid #000000;padding: 10px 0 0 10px;font-size: 14px;}.box .box-header ul li{float: left;margin: 0 8px;line-height: 40px;font-size: 16px;cursor: pointer;}.box .box-header ul li.on{color: #0088cc;text-shadow: 0 0 6px #808080;cursor: pointer;}.box .box-main{width: 790px;height: 440px;padding: 10px 0 0 10px;overflow-y:auto;}.box .box-main ul .first_li{width:100%;height: 100px;}.box .box-main ul .first_li .initials{width:100%;height: 20px;line-height: 20px;background-color: #3f4045;}.box .box-main ul .first_li .position{width:100%;}.box .box-main ul .first_li .position ul li{width:50px;height: 20px;line-height: 20px; float: left;text-align: center;margin: 20px;}</style></head><body ng-controller = "myProController"><div class="box"><div class="box-header"><ul choice-channel-jump><li ng-class="{'on':charArray.other}">#</li><li ng-class="{'on':charArray.A}">A</li><li ng-class="{'on':charArray.B}">B</li><li ng-class="{'on':charArray.C}">C</li><li ng-class="{'on':charArray.D}">D</li><li ng-class="{'on':charArray.E}">E</li><li ng-class="{'on':charArray.F}">F</li><li ng-class="{'on':charArray.G}">G</li><li ng-class="{'on':charArray.H}">H</li><li ng-class="{'on':charArray.I}">I</li><li ng-class="{'on':charArray.J}">J</li><li ng-class="{'on':charArray.K}">K</li><li ng-class="{'on':charArray.L}">L</li><li ng-class="{'on':charArray.M}">M</li><li ng-class="{'on':charArray.N}">N</li><li ng-class="{'on':charArray.O}">O</li><li ng-class="{'on':charArray.P}">P</li><li ng-class="{'on':charArray.Q}">Q</li><li ng-class="{'on':charArray.R}">R</li><li ng-class="{'on':charArray.S}">S</li><li ng-class="{'on':charArray.T}">T</li><li ng-class="{'on':charArray.U}">U</li><li ng-class="{'on':charArray.V}">V</li><li ng-class="{'on':charArray.W}">W</li><li ng-class="{'on':charArray.X}">X</li><li ng-class="{'on':charArray.Y}">Y</li><li ng-class="{'on':charArray.Z}">Z</li></ul></div><div class="box-main"><ul><li class="first_li" ng-repeat="data in positionDatas" id="{{data.letter=='#'?'other':data.letter}}"><p class="initials">{{data.letter}}</p><div class="position"><ul><li ng-repeat = "d in data.title track by $index"><p>{{d.name}}</p></li></ul></div></li></ul></div></div></body><script>var pro = angular.module("myPro",[]);pro.controller("myProController",["$scope",function($scope){var data = [{"letter":"#","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"A","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"B","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"C","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"D","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"E","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"F","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"G","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"H","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"I","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"J","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"K","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"L","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"M","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"N","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"O","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"P","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"Q","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"R","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"S","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"T","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"U","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"V","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"W","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"X","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"Y","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},{"letter":"Z","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]}];$scope.positionDatas = data;$scope.charArray = {A:false,B:false,C:false,D:false,E:false,F:false,G:false,H:false,I:false,J:false,K:false,L:false,M:false,N:false,O:false,P:false,Q:false,R:false,S:false,T:false,U:false,V:false,W:false,X:false,Y:false,Z:false,other:false};angular.forEach($scope.positionDatas,function(i){if(i.letter=="#"){$scope.charArray.other = true;}else{$scope.charArray[i.letter] = true;};})}]);pro.directive("choiceChannelJump",[function(){return{restrict:"A",link:function(scope,element,attr){var parent = $(".box-main");var obj = $(element);obj.find("li").click(function(){var _this = $(this);var text = _this.text();console.log(text);if(text=="#"){text = "other";};if(_this.hasClass('on')){parent.animate({scrollTop:$('#'+text).offset().top-parent.offset().top+parent.scrollTop()+'px'})}});}}}]);</script></html>
阅读全文
0 0