Angular关于$anchorScroll的定位滚动
2024-08-28 03:01:17
以下是实现定位滚动的代码:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>定位滚动</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 200px;
height: auto;
position: fixed;
top: 10px;
right: 0;
}
li{
height: 34px;
line-height: 34px;
text-align: center;
border: 1px solid black;
list-style: none;
}
div{
width: 200px;
height: 330px;
border: 1px solid black;
margin-top: 10px;
}
</style>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$location,$anchorScroll){
$scope.arr = [1,2,3,4,5,6];
$scope.show = function (id) {
$location.hash(id);
$anchorScroll();
}
});
</script>
</head>
<body ng-controller="ctrl">
<ul>
<li ng-repeat="id in arr" ng-click="show('div'+id)">div{{id}}</li>
</ul>
<div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
</body>
</html>
最新文章
- Android—Work—1day
- ePass1000 Full ActiveX Control Reference Manual Version 2.0
- Nginx 301重定向的配置
- Python入门笔记(10):字典
- iOS之UI--UITabBarController
- BZOJ 3505: [Cqoi2014]数三角形 数学
- 资源汇集:nginx教程从入门到精通
- Oracle控制文件操作
- chapter11_2 Lua链表与队列
- UI基础控件—UIView
- Oracle12c 在windonServer2012中安装的步骤
- iOS应用如何得知用户有新拍的图片?
- LoadRunner进行参数化的九种方式取值和连接数据库取值
- jdk8系列二、jdk8方法引用、重复注解、更好的类型推断、新增注解
- 【Ubuntu】PHP环境安装-phpstudy for linux版
- C51寄存器
- 安装gitlab
- GATK --- wdl 语言
- [leetcode DP]72. Edit Distance
- 给MySQL中某表增加一个新字段,设为主键值为自动增长。
热门文章
- centos7 mongodb3.2与3.4版本安装(转)
- Apache Beam WordCount编程实战及源代码解读
- Android - 标准VideoView播放演示样例
- 解决The prefix &#39;context&#39; for element &#39;context:component-scan&#39; is not bound
- Manacher回文串算法学习记录
- Laravel之Eloquent ORM关联
- SQLite使用事务
- Linux组件封装(一)中互斥锁MutexLock的封装
- html 上下左右都居中
- Ros 中的多线程