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.

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body ng-app="egghead" ng-controller="AppCtrl as app">

<a ng-click="app.goToAnchor(elm)" ng-repeat="elm in app.elms">{{elm}}</a>

<div id="{{elm}}" ng-style="app.createStyle($index)" ng-repeat="elm in app.elms">

    {{elm}}

</div>

<script src="//cdn.jsdelivr.net/tinycolor/0.9.16/tinycolor.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script src="app.js"></script>

</body>

</html>
var app = angular.module("egghead", []);

app.config(function ($anchorScrollProvider) {

    $anchorScrollProvider.disableAutoScrolling();

})

app.controller("AppCtrl", function ($location, $anchorScroll) {

    var app = this;

    app.elms = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

    //https://github.com/bgrins/TinyColor#color-combinations

    var colors = tinycolor.analogous("steelblue", app.elms.length, app.elms.length);

    app.goToAnchor = function (elm) {

        $location.hash(elm);
        //call when you when it scroll

        $anchorScroll();

    }

    app.createStyle = function (index) {

        var color = colors[index]; //grabs a tinycolor of the array

        return {

            backgroundColor: color.toHexString(),

            borderBottom: "3px solid black",

            height: "100px"

        };

    }

})

[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. MySQL备份与复制

    1.二进制日志 二进制日志记录了数据库的所有改变,使得任何slave都可以执行相同的更新.一般来说,开启二进制日志大概会有1%的性能损耗,它有两个重要的使用场景: (1)备份:在某个时间点t作了一次备 ...

  2. IT版孔乙己(转)

    [不要做学究]回忆孔先生IT版 我关于本文评价:看到这篇文章很多人会生出这样的疑问“这明明是在诋毁钻研技术的人嘛?是不是在宣扬技术无用论?”. 初看这篇文章的时候我也是这样的想法,但是逐步才明白这篇文 ...

  3. IOS文章地址暂时记录

    动画  http://www.jianshu.com/p/1c6a2de68753 iOS App性能优化  http://www.hrchen.com/2013/05/performance-wit ...

  4. DOS功能的调用

    DOS功能的调用:主要包含三方面的子程序:设备驱动(基本I/O),文件管理和其他(包括内存管理,自取时间,自取终端向量,总之程序等)随着DOS版本的升级,这种DOS功能调用的子程序数量也在不断的增加, ...

  5. redo buffer大小

    转载自http://blog.csdn.net/robinson1988/article/details/4729858 log buffer 是SGA中一块循环使用的内存区域,它一般很小,因为有4个 ...

  6. dwr消息推送

    闲来无事,把自己关于对dwr消息推送的实现过程描述一番. 首先第一步,当然在工程中是加入dwr.jar了,接着在web.xml中配置以下代码 <servlet> <servlet-n ...

  7. 关于FireFox下 CSS3 transition 与其他浏览器的差异

    最近一个项目,动画效果全靠CSS3来做,用得比较多的transition,发现了一点火狐与其他浏览器的小差异. 首先我们写CSS的时候,一般为属性值为0的属性,我们一般会这样写 #id{ posito ...

  8. RestTemplate中文乱码问题

    使用RestTemplate传输带有图片的表单时,需要对表单中的中文参数进行URL编码, eg :URLDecoder.decode(name);               // 使用默认的解码   ...

  9. Oracle 10G (Linux) 冷备恢复

    完整的数据库文件集包括:数据库启动参数文件,控制文件,数据文件,日志文件. 可以通过下面的方式来得到文件的位置和名称. 参数文件 $ORACLE_HOME/dbs/spfile[$ORACLE_SID ...

  10. UIImageView旋转任意角度－－－实现方法

    转自:http://blog.csdn.net/trandy/article/details/6626281 -(UIImageView *) makeRotation:(UIImageView *) ...