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. hdu 1198 Farm Irrigation

    令人蛋疼的并查集…… 我居然做了大量的枚举,居然过了,我越来越佩服自己了 这个题有些像一个叫做“水管工”的游戏.给你一个m*n的图,每个单位可以有11种选择,然后相邻两个图只有都和对方连接,才判断他们 ...

  2. 无人机DLG生产作业流程

    参考文章 无人机(AVIAN)低空摄影测量作业流程 无人机低空遥感测绘作业流程及主要质量控制点 微型无人机低空摄影测量系 无人机航空摄影测量系统引进与发展 基于复杂地形的无人机航摄系统1∶500 DL ...

  3. 色谱峰的类型BB，BV，VB等都是什么意思

    B(Baseline):峰在基线处开始或结束V(Valley):峰在谷点线处开始或结束P(Peak): 峰开始或结束与基线贯穿点BB就代表标准的峰:从基线开始出峰,最后峰到基线结束(from base ...

  4. [OFBiz]开发 五

    1.初学者例程:OFBiz Tutorial - A Beginners Development Guidehttps://cwiki.apache.org/confluence/display/OF ...

  5. <转>python version 2.7 required,which was not found in the registry

    安装PIL-1.1.7.win32-py2.7的时候,不能再注册表中识别出来python2.7 方法:新建一个register.py 文件,把一下代码贴进去,保存 # # script to regi ...

  6. javascript 继承、命名空间实现分享

    命名空间是用来组织和重用代码的编译单元,在大型项目开发中javascript使用的越来越多时,我们就应该将项目里的js类库管理起来,如何将自己进行归类管理,防止命名冲突,但是Javascript默认不 ...

  7. Python对象体系揭秘

    Guido用C语言创造了Python,在Python的世界中一切皆为对象. 一.C视角中的Python对象 让我们一起追溯到源头,Python由C语言实现,且向外提供了C的API http://doc ...

  8. bzoj 1014 [JSOI2008]火星人prefix（splay+hash）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1014 [题意] 给定一个字符串,要求提供修改一个字符,插入一个字符,查询两个后缀LCP ...

  9. 使用logback.xml配置来实现日志文件输出

    转自:http://sungang-1120.iteye.com/blog/2104296 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback- ...

  10. [POJ] #1001# Exponentiation : 大数乘法

    一. 题目 Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 156373   Accepted: ...