zoukankan      html  css  js  c++  java
  • [AngularJS] Using $anchorScroll

    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" }; } })
  • 相关阅读:
    08-蓝图&单元测试
    07-多对多操作
    JAVA 判断字符串是否可转化为JSONObject、JSONArray
    git常用命令
    线程和进程的一些基本概念
    JavaWeb学习总结(七):通过Servlet生成验证码及其应用 (BufferedImage类)
    JavaWeb学习总结(十):Session简单使用
    Ubuntu16.04 安装maven
    Ubuntu16.04 安装redis
    Ubuntu16.04 下安装tomcat
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4185909.html
Copyright © 2011-2022 走看看