以下是实现定位滚动的代码：

<!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的定位滚动的更多相关文章

  1. Angular CDK Overlay 弹出覆盖物

    为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...

  2. 在指定的div中搜索内容，并滚动显示到当前搜索到的内容处

    我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...

  3. web移动端input获得光标Fixed定位失效解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...

  4. 都 9012了，该选择 Angular、React，还是Vue？

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可 ...

  5. robotframework，移动端（小程序）自动化，滚动屏幕的方法

    场景描述: 小程序端定位元素有无法定位弹出层内容的问题(自动化工具只能识别到背景主层,无法识别到弹出层) 解决思路: 1.弹出层元素与背景主层元素位置一致,当点击出弹出层时,在定位背景主层即可定位到弹 ...

  6. 8分钟为你详解React、Angular、Vue三大前端技术

    [引言] 当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题.本文就对于当下主流的前端开发技术React.Vue.Angular这三个框架做个相对详尽的探究,目的是为了 ...

  7. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  8. ionic基础知识

    ion-header-bar(头部 页眉) 在内容顶部添加一个固定header栏. 用法 <ion-header-bar align-title="left" class=& ...

  9. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

随机推荐

  1. EffectiveJava（13）使类和成员的可访问性最小化

    1.为什么要使类和成员可访问性最小化 它可以有效地解除组成系统的各模块之间的耦合关系,使得这些模块可以独立的开发 测试 优化 使用 理解和修改.提高软件的可重用性 2.成员的访问级别 私有(priva ...

  2. 【OpenGL 学习笔记01】HelloWorld演示样例

    <<OpenGL Programming Guide>>这本书是看了忘,忘了又看,赶脚还是把笔记做一做心里比較踏实,哈哈. 我的主题是,好记性不如烂笔头. ========== ...

  3. inspect模块详解

    inspect模块主要提供了四种用处: (1).对是否是模块,框架,函数等进行类型检查. (2).获取源码 (3).获取类或函数的参数的信息 (4).解析堆栈 使用inspect模块可以提供自省功能, ...

  4. TCP/IP详解 卷一（第十三章 IGMP：Internet组管理协议）

    本章将介绍用于支持主机和路由器进行多播的Internet组管理协议(IGMP) 它让一个物理网络上的所有系统知道主机当前所在的多播组.多播路由器需要这些信息以便知道多播数据报应该向那些接口转发. 跟I ...

  5. Window 7 开 WIFI做热点

    cmd下两个命令即可: C:\Users\lyx>netsh wlan set hostednetwork mode=allow ssid=ACE-PC key=12345678承载网络模式已设 ...

  6. ListView知识点汇总(9.2)

    1 最为基础的listview: http://www.cnblogs.com/allin/archive/2010/05/11/1732200.html http://blog.csdn.net/h ...

  7. asp.net core mvc视频A：笔记3-6.视图数据共享之session/cache

    第一部分:Session讲解 会话级别的,怎么区分呢?以浏览器为单位,比如IE,搜狗等等,都算一个单独的会话 修改3.5项目 控制器代码 前端显示 startup.cs中配置并启用Session 运行 ...

  8. flume配置和说明(转)

    Flume是什么 收集.聚合事件流数据的分布式框架 通常用于log数据 采用ad-hoc方案,明显优点如下: 可靠的.可伸缩.可管理.可定制.高性能 声明式配置,可以动态更新配置 提供上下文路由功能 ...

  9. atom无法安装插件的解决方法

    atom通过setting中无法下载插件,通过apm也无法下载插件,可能是网络.config配置的问题,不好解决. 下面的方法全手动,基本属于万金油方法: 1,在atom的setting页面中点击op ...

  10. jquery的find()

    jQuery 遍历 - find() 方法 jQuery 遍历参考手册 实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("sp ...