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

<!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. python开发微信支付学习记录(转)

    前言 微信支付是由微信及财付通联合推出的移动支付创新产品.如今,随着微信支付的全面开放,相关需求也越来越多,很多开发人员进行微信支付开发及商家申请微信支付时,面临着诸多疑惑. 要想开发顺利进行,首先要 ...

  2. log4j教程 11、日志记录到文件

    要写日志信息到一个文件中,必须使用org.apache.log4j.FileAppender.有以下FileAppender的配置参数: FileAppender配置: 属性 描述 immediate ...

  3. java 过滤器(Filter)与springMVC 拦截器(interceptor)的实现案例

    java 过滤器Filter: package com.sun.test.aircraft.filter;import javax.servlet.*;import java.io.IOExcepti ...

  4. [ElasticSearch]Java API 之 词条查询（Term Level Query）

    1. 词条查询(Term Query)  词条查询是ElasticSearch的一个简单查询.它仅匹配在给定字段中含有该词条的文档,而且是确切的.未经分析的词条.term 查询 会查找我们设定的准确值 ...

  5. 倍福TwinCAT(贝福Beckhoff)基础教程2.2 TwinCAT常见类型使用和转换_指针

    定义pt为指向INT类型的指针,在程序中取得var_int1的地址(INT类型),然后将地址对应的数据还原给var_int2(pt^的写法)     更多教学视频和资料下载,欢迎关注以下信息: 我的优 ...

  6. 系统重装 JUJUMAO VHD安装WIN7解析

    1 把原有系统分区一个删除(使用第三方分区工具如PM或者PQ)并新建一个系统分区(也可以同时新建其他分区如D盘,E盘,但是一定要把C盘设置为NTFS格式并且活动的!)   2 将JUJUMAO_VHD ...

  7. Easy way to change collation of all database objects in SQL Server

    This info is from: http://www.codeproject.com/Articles/302405/The-Easy-way-of-changing-Collation-of- ...

  8. LoadRunner调用md5方法

    LoadRunner调用md5方法 上一篇 / 下一篇  2011-04-29 11:25:12 / 个人分类:Loadrunner 查看( 958 ) / 评论( 0 ) / 评分( 0 / 0 ) ...

  9. java计算时间差 Java问题通用解决代码

    java实现计算时间差     正式版:       /**        * 计算时间差,求出两者相隔的时间        *        * @param nowDate        *    ...

  10. CALayer的contentsRect

    contentsRect 想像下contentsRect作为层内容的可视区域.内容的矩形区域(x,y,width,height)也是绑定到层的框架上的.contentRect是一个比例值,而不是屏幕上 ...