angularJS-实现锚点跳转实例

最新推荐文章于 2024-07-11 15:59:35 发布

艾斯德斯的博客

最新推荐文章于 2024-07-11 15:59:35 发布

阅读量992

点赞数

本文链接：https://blog.csdn.net/qq_36898102/article/details/77825830

版权

<!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=