Angular关于$anchorScroll的定位滚动
以下是实现定位滚动的代码：
<!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>
Angular关于$anchorScroll的定位滚动的更多相关文章
- Angular CDK Overlay 弹出覆盖物
为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...
- 在指定的div中搜索内容，并滚动显示到当前搜索到的内容处
我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
- 都 9012了，该选择 Angular、React，还是Vue？
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可 ...
- robotframework，移动端（小程序）自动化，滚动屏幕的方法
场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...
- 8分钟为你详解React、Angular、Vue三大前端技术
[引言] 当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题.本文就对于当下主流的前端开发技术React.Vue.Angular这三个框架做个相对详尽的探究,目的是为了 ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
- ionic基础知识
ion-header-bar(头部 页眉) 在内容顶部添加一个固定header栏. 用法 <ion-header-bar align-title="left" class=& ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
随机推荐
- python核心编程学习记录之Web编程
cgi未完待续
- INTZ DX format
http://aras-p.info/texts/D3D9GPUHacks.html 格式 用法 资源 描述 NVIDIA GeForce AMD Radeon 英特尔 阴影映射 D3DFMT_D16 ...
- 详细解析Spring事务的配置和OpenSessionInview的作用
1.事务的特性 原子性:事务中的操作是不可分割的一部分 一致性:要么同时成功,要么同时失败(事务执行前后数据保持一致) 隔离性:并发互不干扰 持久性:事务一旦被提交,它就是一条持久 ...
- bat 同步windows系统时间
需要使用管理员权限运行 net start w32timew32tm /config /updatew32tm /resync /rediscovernet stop w32timepause
- 斯坦福《机器学习》Lesson5感想———1、成学习算法
在前面几课里的学习算法的思路都是给定数据集以后.确定基于此数据集的最佳如果H函数,通过学习算法确定最佳如果H的各个參数,然后通过最佳如果函数H得出新的数据集的结果.在这一课里介绍了一种新的思路,它的核 ...
- python——父类与子类的一些说明
Python中类的初始化方法是__init__(),因此父类.子类的初始化方法都是这个,如果子类不实现__init__()这个函数,初始化时调用父类的初始化函数, 如果子类实现了这个函数,则要在这个函 ...
- css3中的新特性经典应用
这篇文章主要分析css3新特性的典型应用,都是干活,没得水分. 1.动画属性:animation. 利用animation可以实现元素的动画效果,他是一个简写属性,用于设置6个动画属性:aminati ...
- cisco 为每个单独的人员设置不同的用户名和密码
cisco 为每个单独的人员设置不同的用户名和密码 2010-12-15 17:00:16 分类: 系统运维 Router1#configure terminalEnter configuration ...
- win7不休眠方式设置
方式1:命令行下以管理员方式执行:powercfg -h off 方式2:右键个性化-->屏幕保护程序-->更改电源设置--->更改计算机睡眠时间--->是计算机进入睡眠状态选 ...
- spark插件入门完整版本
1 在spark项目中添加source folder文件夹,取名为src/plugins/testplugin/src/java 2 在此文件夹下新建包名,取名为com.jivesoftware.sp ...