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 ...
随机推荐
- spring aop expression支持多个表达式配置
<!-- 配置那些类的方法进行事务管理 --> <aop:config> <aop:pointcut id="allServiceMethod" ex ...
- 黑马程序猿——JAVA高新技术——反射
----------android培训.java培训.java学习型技术博客.期待与您交流!------------ 一.对于反射的概念 对于JAVA反射机制是在执行状态中,对于随意一个类.都可以知道 ...
- eclipse黄色警告(finally block does not complete normally) ，不建议在finally中使用return语句
在eclipse中编写例如以下的代码,eclipse会给出黄色告警:finally block does not complete normally. public class Test { publ ...
- JavsScript中DOM的基本操作
节点及其类型 元素节点 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在 html 文档的什么位置编写 js 代码 直接在 html 页面 ...
- Install RabbitMQ server in CentOS 7
About RabbitMQ RabbitMQ is an open source message broker software, also sometimes known as message-o ...
- java中替换双引号 Java问题通用解决代码 Java问题通用解决代码
http://blog.csdn.net/newhappy2008/article/details/4785263 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- flex-direction用法解释
语法: flex-direction:row | row-reverse | column | column-reverse 默认值:row 适用于:flex容器 继承性:无 动画性:否 计算值:指定 ...
- struct和class的不同以及struct的应用场景
struct在C#中被用来定义结构,它是一种比类小的数据类型.和类一样都是创建对象的模板,可以有自己的数据以及处理和访问数据的方法. struct的用法: struct FurnitureSize { ...
- Hadoop 配置及hadoop HA 的配置
注:本文中提到的ochadoop 不要感到奇怪,是亚信公司内部自己合成的一个包.把全部的组件都放在一个包内了.免去了组件的下载过程和解决兼容问题.事实上也能够自己下载的.不要受到影响. 另,转载请注明 ...
- root 执行过程权限问题
mysql 1449 : The user specified as a definer ('root'@'%') does not exist 解决方法 权限问题,授权 给 root 所有sql ...