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. Oracle EM 不能访问

    zwt2001267 原文 Oracle EM 不能访问 1. cmd控制启动EM: C:\Users\Administrator>emctl start dbconsoleEnvironmen ...

  2. PIG的配置

    Pig是一个客户端应用程序,就算你要在Hadoop集群上运行Pig,也不需要在集群上装额外的东西.Pig的配置非常简单: 1.下载pig,网址http://pig.apache.org/ 2.在机器上 ...

  3. oracle修改密码及账户锁定

    在oracle修改密码的时候,一种是用dba账户来修改用户的密码,一种是用户自己修改自己的密码: SQL> alter user kel identified by kel; 解锁命令: SQL ...

  4. BestCoder Round #75 解题报告

    King's Cake [思路] 递推 公式:f(n,m)=f(max(m,n-m),min(m,n-m))+1,n>m [代码] #include<cstdio> #include ...

  5. java 复习003 之排序篇

    由java 复习003跳转过来的C语言实现版见some-sort-algorithms 快速排序(不稳定 O(n log n)) package vell.bibi.sort_algorithms; ...

  6. hdfs[命令] fsck

    Usage: DFSck <path> [-list-corruptfileblocks | [-move | -delete | -openforwrite] [-files [-blo ...

  7. 取消本地SVN文件夹与服务器关联

    问题:之前建了一个SVN代码库,同步了代码上去,但中途发现建库时的规则搞错了,就把服务器上的库给删了重建,然后改变本地代码的svn服务器关联地址,但使用Relocate一直报错. 错误有两种情况:1. ...

  8. 轻松突击ThreadLocal

    本文出自 代码大湿 代码大湿 ThreadLocal是用来保存线程的本地变量,可以保证每个线程都有一个自己的变量(包括static变量). 本文所有代码请点击我 1 看个实际场景. 我们要设计一个序列 ...

  9. av_interleaved_write_frame 网络不好的情况下返回较慢

    用libvlc做直播推流引擎在网络较差的情况下,需要关闭直播,并且重新开播.这个过程中,推流引擎重启,需要的是快速响应.实际上测试结果发现,经常会发生引擎关闭接口卡住.后来跟踪代码,定位到s_rtmp ...

  10. Linux优化之IO子系统监控与调优

    Linux优化之IO子系统 作为服务器主机来讲,最大的两个IO类型 : 1.磁盘IO 2.网络IO 这是我们调整最多的两个部分所在 磁盘IO是如何实现的 在内存调优中,一直在讲到为了加速性能,linu ...