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" }; } })
  • 相关阅读:
    装修后才知道的79件事,无数网友砸出来的经验(转)
    FusionCharts参数说明
    学习好文章
    好文
    oracle删除同一张表的重复记录
    2012的到来,2011年总结
    近期计划
    #¥(#)@()¥。。。。。。。
    疯狂的一周
    可怜的鱼儿
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4185909.html
Copyright © 2011-2022 走看看