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. linux下查看硬件配置的相关命令

    from:http://www.jakee.cn/index.php/archives/501.html 常用命令整理如下:查看主板的序列号: dmidecode | grep -i ’serial ...

  2. map用法详解

    转自:http://www.kuqin.com/cpluspluslib/20071231/3265.html Map是 STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在 ...

  3. Jemeter对Oracle数据库性能测试方法

    下载Oracle的jdbc数据库驱动包,注意Oracle数据库的版本,这里使用的是:Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 ...

  4. Claim-based-security for ASP.NET Web APIs using DotNetOpenAuth

    Recently I worked with a customer assisting them in implementing their Web APIs using the new ASP.NE ...

  5. 用Intellij Idea创建简单的Servlet

    Servlet作为Java服务端程序,使用起来还是挺方便的,下面是具体配置过程,我用的是Intellij Idea. 1. 做好必要准备,Intellij Idea(或者Eclipse for J2E ...

  6. 第二百七十一天 how can I 坚持

    每天的内容应该是这个样子,做了什么,收获了什么,有哪些东西感动了你. 就像昨天看了个电影<解救吾先生>,看完没点感觉或感受是不可能的,刘德华扮演的吾先生最终获救,不仅仅是靠运气,多少还是因 ...

  7. 快速切换目录软件推荐——autojump

    受到<autojump: 在命令行下快速更改目录>的鼓动,决定试用下这个软件. 但ubuntu下的源貌似有些问题, sudo apt get install autojump 后,死活提示 ...

  8. #maven系列（4）-maven插件的介绍

    1. 简介 在Maven设计中,实际的任务都是交由插件完成的,这种思想和设计模式中的模板方法非常类似,模板方法模式在父类中定义算法的整体结构,子类可以通过实现或者重写父类的方法来控制实际的行为,这样既 ...

  9. svn备份与恢复

    公司把SVN服务器从windows迁移到linux,其主要步骤记录如下. windows上备份 "C:\Program Files\VisualSVN Server\bin\svnadmin ...

  10. STC-ISP下载过程