If you're in a scenario where you want to disable the auto scrolling, but you want to control the scrolling manually, you can use the anchorscroll service, and then just invoke that after some hash has changed.

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body ng-app="egghead" ng-controller="AppCtrl as app">
  8.  
  9. <a ng-click="app.goToAnchor(elm)" ng-repeat="elm in app.elms">{{elm}}</a>
  10. <div id="{{elm}}" ng-style="app.createStyle($index)" ng-repeat="elm in app.elms">
  11.     {{elm}}
  12. </div>
  13.  
  14. <script src="//cdn.jsdelivr.net/tinycolor/0.9.16/tinycolor.js"></script>
  15. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  16. <script src="app.js"></script>
  17. </body>
  18. </html>
  1. var app = angular.module("egghead", []);
  2.  
  3. app.config(function ($anchorScrollProvider) {
  4.     $anchorScrollProvider.disableAutoScrolling();
  5. })
  6.  
  7. app.controller("AppCtrl", function ($location, $anchorScroll) {
  8.     var app = this;
  9.  
  10.     app.elms = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
  11.  
  12.     //https://github.com/bgrins/TinyColor#color-combinations
  13.     var colors = tinycolor.analogous("steelblue", app.elms.length, app.elms.length);
  14.  
  15.     app.goToAnchor = function (elm) {
  16.         $location.hash(elm);
            //call when you when it scroll
  17.         $anchorScroll();
  18.     }
  19.  
  20.     app.createStyle = function (index) {
  21.         var color = colors[index]; //grabs a tinycolor of the array
  22.         return {
  23.             backgroundColor: color.toHexString(),
  24.             borderBottom: "3px solid black",
  25.             height: "100px"
  26.         };
  27.     }
  28.  
  29. })

[AngularJS] Using $anchorScroll的更多相关文章

  1. angularjs 锚点操作服务 $anchorScroll

    在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/ro ...

  2. Part 21 to 22 AngularJS anchorscroll

    Part 21 AngularJS anchorscroll example $anchorscroll service is used to jump to a specified element ...

  3. AngularJs $anchorScroll、$controller、$document

    $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...

  4. AngularJS 源码分析1

    AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...

  5. [Angularjs]系列——学习与实践

    写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...

  6. angularJs的ui-router总结

    一:跑通ui-router. ui-router源码在最后面 跑通后的样子: 这个不解释了,都是很基本的东西. 二:切换视图: 这里的name可以不写,但是你得放到state的第一个参数里. 跑起来后 ...

  7. angularjs入门整理

    之前发过一篇博文,从mobile angular ui的demo和其官网初识整个angularjs的大体使用,但是没很好学习,只是通过一些技术博文初步认识,陷入很多坑.所以现在在中文官网正式整理下知识 ...

  8. 【经验】AngularJS

    1.关于ng-model <textarea id="feature_name" class="col-sm-3" placeholder="软 ...

  9. Angularjs 源码

    /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...

随机推荐

  1. C#中嵌入互操作类型的含义

    首先说一下它的含义: 1. ”嵌入互操作类型”中的嵌入就是引进.导入的意思,类似于c#中using,c中include的作用,目的是告诉编译器是否要把互操作类型引入. 2. “互操作类型”实际是指一系 ...

  2. HDU 2227-Find the nondecreasing subsequences（dp+BIT优化）

    题意: 给你一个序列a[],求它的不降子序列的个数 分析: dp[i]表示以i结尾不降子序列的个数,dp[i]=sum(dp[j])+1(j<i&&a[j]<=a[i]); ...

  3. IOS 屏幕截图 UIScrollview

    //截图UIView:截全图 -(UIImage*)captureView:(UIView *)theView{ CGRect rect = theView.frame; if ([theView i ...

  4. WinForm使用webbrowser爬取数据，中文乱码问题

    使用winform中的webbrowser抓取某个网站的数据时,遇到中文乱码的问题: 当时使用的获取网页内容的代码为: webBrowser1.DocumentText.ToString(); 不管我 ...

  5. PHP 获取文件权限函数

    /* * substr 返回字符串的子串 * base_convert 在任意进制之间转换数字 * fileperms 取得文件的权限 */ // 获取权限 function getChmod($fi ...

  6. 通过简单的Linux内核启动程序代码窥探操作系统的启动原理

    作者:吴乐  山东师范大学 <Linux内核分析> 孟宁 MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.程序设计与分析 ...

  7. 【跟我一起学python吧】python chr()、unichr()和ord()

    chr().unichr()和ord() chr()函数用一个范围在range(256)内的(就是0-255)整数作参数,返回一个对应的字符.unichr()跟它一样,只不过返回的是Unicode字符 ...

  8. 【和我一起学python吧】Python解释执行原理

    这里的解释执行是相对于编译执行而言的.我们都知道,使用C/C++之类的编译性语言编写的程序,是需要从源文件转换成计算机使用的机器语言,经过链接器链接之后形成了二进制的可执行文件.运行该程序的时候,就可 ...

  9. matlab特征值分解和奇异值分解

    特征值分解 函数 eig 格式 d = eig(A)         %求矩阵A的特征值d,以向量形式存放d. d = eig(A,B)       %A.B为方阵,求广义特征值d,以向量形式存放d. ...

  10. JAVA与网络开发（TCP：Socket、ServerSocket；UDP：DatagramSocket、DatagramPacket；多线程的C/S通讯、RMI开发概述）

    通过TCP建立可靠通讯信道 1)为了对应TCP协议里的客户端和服务器端,Socket包提供了Socket类和ServerSocket类. 2)Socket类构造函数及相关方法 Public Socke ...