angullarjs实现锚点楼层跳转

最新推荐文章于 2022-08-29 11:41:28 发布

Web攻城狮

最新推荐文章于 2022-08-29 11:41:28 发布

阅读量1.8k

点赞数 1

分类专栏： angularjs 文章标签： angullarjs 实现锚点楼层跳转锚点

本文链接：https://blog.youkuaiyun.com/b1244154318/article/details/52628332

版权

angularjs 专栏收录该内容

9 篇文章

订阅专栏

angullarjs实现锚点楼层跳转

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>anchor</title>
		<style>
			#wei div{
				width:100%;
				height:720px;
				background: red;
				color:#fff;
				text-align:center;
				line-height: 720px;
				margin:20px;
				font-size: 80px;
			}
			#wei ul{
				position: fixed;
				top:300px;
				right:60px;
			}
			#wei ul li{
				width:20px;
				display:block;
				height:20px;
				background: gray;
				color:#fff;
				text-align:center;
				line-height: 20px;
				border-radius: 50%;
				margin-bottom: 20px;
				cursor: pointer;
			}

		</style>
	</head>
	<body ng-controller="show">
			<div id="wei">
				<div ng-repeat="attr in arr" ng-attr-id="div{{attr}}">{{attr}}</div>
				<ul><!-- 定义右边的点 -->
					<li ng-repeat="attr in arr" ng-click="jump('div'+attr)">{{attr}}</li>
				</ul>

			</div>
		<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = angular.module('myApp',[]);
			app.controller('show',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
				$scope.arr=[1,2,3,4,5];
				$scope.jump=function(id){
					//console.log(id);
					$location.hash(id);//添加锚点
				    $anchorScroll();	//重新定义服务,解决当滑动时点击锚点无作用的bug
				}
				
			}]);
		</script>	
	</body>
</html>