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

<!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. 【重点突破】—— Easy Mock的使用及Mock.js规范

    前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范.  一.Easy Mock ...

  2. 2017.3.31 spring mvc教程（二）核心流程及配置详解

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  3. modal html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vsftpd 配置:chroot_local_user与chroot_list_enable userlist_enable userlist_deny详解

    默认情况下,如果设置了 userlist_enable=YES,当 userlist_deny 选项设置为 YES 的时候,userlist_file=/etc/vsftpd.userlist 中列出 ...

  5. 通知传值(NSNotificationCenter)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenVveW91MTMxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. Servlet基本用法二接口和类

    转自:http://www.cnblogs.com/xujian2014/p/4536168.html 一.摘要 本文主要简单介绍开发Servlet需要用到的接口和类. 二.ServletReques ...

  7. C#中FileStream和StreamWriter/StreamReader的区别

    首先致谢!转自:http://blog.sina.com.cn/s/blog_67299aec0100snk4.html   本篇可能不是非常深入,但是胜在清晰明了   FileStream对象表示在 ...

  8. ASP.NET基本对象介绍

    ASP.NET能够成为一个庞大的软件体系,与它提供了大量的对象类库有很大的关系.这些类库中包含许多封装好的内置对象,开发人员可以直接使用这些对象的方法和属性,因此用较少的代码量就能轻松完成很多对象.  ...

  9. 安装Glass Box代理程序

    安装玻璃盒代理程序 目前版本的玻璃代理程序主要支持主流 Java EE 应用程序服务器(如 JBoss,Tomcat,WebLogic 和 WebSphere).玻璃盒代理程序可以自动化安装,但考虑到 ...

  10. 使用 yarn 作为 Npm 的代替方案

    相关传送门: # window 安装包下载https://yarnpkg.com/zh-Hans/docs/install#windows-stable # yarn官方网站 https://yarn ...