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

<!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. IP头，TCP头，UDP头，MAC帧头定义

    一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER {  char m_cDstMacAddress[6];    // ...

  2. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  3. sersync+rsync实时数据同步

    sersync+rsync实时数据同步 1.相关背景介绍 前面有关文章配置实现了rsync增量同步以及配置为定时同步,但是在实际生产环境中需要实时的监控数据从而进行同步(不间断同步),可以采取inot ...

  4. Centos 通过yum的方式升级内核

    在安装某些软件时,可能对我们的系统内核版本有要求. 比如在安装docker要满足一定的条件,对于centos系统,要求必须是64位,并且内核版本是3.10以上. 如果你的centos操作系统内核低于3 ...

  5. 载入本地Html文件

    NSString * resousePath = [[NSBundle mainBundle]resourcePath];         NSString * filePath = [resouse ...

  6. SQL JOB 调用 SSIS package 权限问题

    来自: http://www.cnblogs.com/sodacc/archive/2012/11/26/2789135.html 第一次用SQL给SSIS包排JOB的时候,都会遇到这样一个问题:单独 ...

  7. Python内置模块和第三方模块

    1.Python内置模块和第三方模块 内置模块: Python中,安装好了Python后,本身就带有的库,就叫做Python的内置的库. 内置模块,也被称为Python的标准库. Python 2.x ...

  8. spring拦截器不拦截方法名原因

    开发一个基于注解的登录拦截器,遇到拦截器只能拦截controller不能拦截到具体的方法名,这样拦截器就完全没用,经过仔细摸索,DefaultAnnotationHandlerMapping和Anno ...

  9. passwd（总结）

    1.当前用户是root root用户修改密码 ,直接 passwd[不要输入当前用户密码] 如果修改其他用户密码,需要 passwd 用户名 如: passwd sc 短短的密码,如123也能通过,因 ...

  10. HBase数据同步到ElasticSearch的方案

    ElasticSearch的River机制 ElasticSearch自身提供了一个River机制,用于同步数据. 这里能够找到官方眼下推荐的River: http://www.elasticsear ...