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. POJ 1077 Eight

    题意:经典的八数码=3= 3*3的格子,里面有1~8这8个数字,还有一个空格x,移动空格的位置,直到移到1~8按顺序排好,输出移动的序列. 解法:看到题果断写了个广搜……然后T了……百度了一下说广搜虽 ...

  2. Listview异步加载之优化篇

    异步加载图片基本思想: 1.      先从内存缓存中获取图片显示(内存缓冲) 2.      获取不到的话从SD卡里获取(SD卡缓冲) 3.      都获取不到的话从网络下载图片并保存到SD卡同时 ...

  3. [原创]C语言利用pcre正则表达式库

    C语言使用正则表达式,可以利用pcre库,这个比较不错的哦. 在使用过程中,利用python进行测试正则表达式是否OK,后发现出现了问题.如下所示: regex.c:11:18: warning: u ...

  4. golang学习遭遇duang...duang...duang

    初学golang时,在windows上使用liteIDE进行,很多语法都能自己调整. 后来使用linux桌面,再次编写时,发现很多东西都忘掉了.这难道就是习惯gocode后的弊端吗?还是人到 前中年 ...

  5. Tableau学习笔记之一

    书本:Tableau数据可视化实战,Ashutosh Nandeshwar著 学习时主要采用Tableau Desktop 9.0,由于该软件是商业软件,价格不菲,故只能试用,期限为14天,可以通过修 ...

  6. PHP 获取文件权限函数

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

  7. CSS使用简介

    1.CSS 指层叠样式表 (Cascading Style Sheets) 2.说明: 样式定义如何显示 HTML 元素:     样式通常存储在样式表中:     把样式添加到 HTML 4.0 中 ...

  8. 如何在 Windows Azure 的虚拟机 ubuntu 上面安装和配置 openVPN（一）

    这篇文章,既是写给大伙儿的,也是写给自己的.本文要求读者需要有一定的英文基础和动手能力. 因为有MSDN subscriptions,所以每个月有100$可以使用windows azure,于是想尝试 ...

  9. Hadoop2.2.0(yarn)编译部署手册

    Created on 2014-3-30URL : http://www.cnblogs.com/zhxfl/p/3633919.html @author: zhxfl   Hadoop-2.2编译 ...

  10. Unity3D中的Shader

    简单的说,Shader是为渲染管线中的特定处理阶段提供算法的一段代码.Shader是伴随着可编程渲染管线出现的,从而可以对渲染过程加以控制. 1. Unity提供了很多内建的Shader,这些可以从官 ...