AngularJS实现的锚点楼层跳转功能示例
本文实例讲述了AngularJS实现的锚点楼层跳转功能。分享给大家供大家参考，具体如下：
<!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>
运行效果如下：
点击锚点2：
点击锚点3：
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
- angular-ui-sortable实现可拖拽排序列表
- 使用angular帮你实现拖拽的示例
- 基于AngularJS的拖拽文件上传的实例代码
- Angular实现较为复杂的表格过滤，删除功能示例
- AngularJS实现的根据数量与单价计算总价功能示例
- Angular实现的日程表功能【可添加及隐藏显示内容】
- Angular实现的简单定时器功能示例
- Angular实现点击按钮控制隐藏和显示功能示例
- Angular实现的敏感文字自动过滤与提示功能示例
- AngularJS实现的简单拖拽功能示例
相关推荐
-
angular-ui-sortable实现可拖拽排序列表
项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sortable 需要在之前引入jquery,和jquery-ui,否则无法使用. 我们要做的事情,加载数据,拖拽排序并输出当前顺序: js代码: <script src="../../jquery.js"></script> <script src="..
-
Angular实现的简单定时器功能示例
本文实例讲述了Angular实现的简单定时器功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular定时器</title> <script src="angular.min.js"></scrip
-
AngularJS实现的简单拖拽功能示例
本文实例讲述了AngularJS实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS拖拽</title> <style> *{ padding:0; margin:0; } .wei{ wi
-
AngularJS实现的根据数量与单价计算总价功能示例
本文实例讲述了AngularJS实现的根据数量与单价计算总价功能.分享给大家供大家参考,具体如下: 先看一下效果: 代码如下: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.jb51.net angular计算总价</title> <link rel="styles
-
Angular实现的日程表功能【可添加及隐藏显示内容】
本文实例讲述了Angular实现的日程表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular日程表</title> <style> table{ border-collapse: c
-
Angular实现点击按钮控制隐藏和显示功能示例
本文实例讲述了Angular实现点击按钮控制隐藏和显示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示隐藏</title> <style> .box{ width: 100p
-
使用angular帮你实现拖拽的示例
拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background:
-
Angular实现较为复杂的表格过滤，删除功能示例
本文实例讲述了Angular实现较为复杂的表格过滤,删除功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular过滤.删除</title> <style> table{ border: 1px solid black; w
-
Angular实现的敏感文字自动过滤与提示功能示例
本文实例讲述了Angular实现的敏感文字自动过滤与提示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net angular敏感文字自动过滤</title> <script src="angul
-
基于AngularJS的拖拽文件上传的实例代码
随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>