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

<!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. 面试题：如何在不使用临时变量temp的情况下交换两个整数的值？

    利用一个小技巧,一个整数a在异或另一个整数b两次以后所得的值还是整数a. 具体的过程我们可以自己找两个整数以二进制的形式自己在纸上画一下他们的异或过程.(异或的运算符号为"^") ...

  2. How to Clear setInterval() without Knowing the ID

    ProblemDeclaring a setInterval() without keeping a reference to it (which is returned from the funct ...

  3. 数据库中存在0，1，2.....或者1，null，2 排序时让0或者null在最后的sql语句

     select * from yryz_products_t order by isnull(sort),sort;     select * from yourtable order by cast ...

  4. 倍福TwinCAT(贝福Beckhoff)基础教程5.1 TwinCAT-4 获取本机名称和网卡名称

    使用命令FB_GetHostName来获取本机名称,返回的是一个字符串   使用命令FB_GetAdaptersInfo获取网卡信息(注意采集到的是一个非常复杂的类型,本身是一个数组,数组的每个元素又 ...

  5. File:方法（具体）

    File方法: Name()方法:获取File的名称. getPath()方法:获取File的路径. getAbsolutePath()方法:获取文件或文件夹的绝对路径名称. getParent()方 ...

  6. 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记30 ScrollView Demo实战

    在上一话中我们创建了一个通过URL读取图片的Demo,这个Demo是不能拖动和缩放的.如今给它添加选项让它能够手动切换URL,并把图片加入到ScrollView中. 向Storyboard中拖入一个s ...

  7. Shiro学习小结

    1. What is Shiro? Apache旗下一个开源的Java权限框架,它将软件系统的安全认证相关的功能抽取出来,实现用户身份认证,权限授权.加密.会话管理等功能,组成了一个通用的安全认证框架 ...

  8. excel表格快捷键

    CTRL+A   全选     CTRL+B   加粗       CTRL+C   复制      CTRL+D   下拉(复制上一个单元格的格式和内容)    CTRL+G   定位 CTRL+F ...

  9. 转 SQL行转列汇总

    1.PIVOT 用于将列值旋转为列名(即行转列) PIVOT 的一般语法是:PIVOT(聚合函数(列名) FOR 列名 in (列值1,…) )AS P select * from TB pivot ...

  10. DelphiXe 中静态数组TByteArray和动态数组TBytes /array of byte 的区别

    在应用中发现静态数组和动态数组是有区别的: procedure TForm1.Button1Click(Sender: TObject);var  RsltStream: TMemoryStream; ...